Cards

Basic

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Footer

<div class="card card-bordered">
<div class="card-header">
<h3 class="card-title">Title</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>

Card Scroll

Use .card-scrolland height classes .h-{size}on a card's body to have a card with scrollable content:

Title

Footer

<div class="card bg-light card-bordered">
<div class="card-header">
<h3 class="card-title">Title</h3>
</div>
<div class="card-body card-scroll h-200px">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>

Collapsible

Add on Bootstrap's .collapseplugin to enable quick collapsible cards. For more info, please refer to the official documentation.

Title

Footer

<div class="card card-bordered">
<div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible">
<h3 class="card-title">Title</h3>
<div class="card-toolbar rotate-180">
<span class="svg-icon svg-icon-1">
...
</span>
</div>
</div>
<div id="kt_docs_card_collapsible" class="collapse show">
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>

Flush Borders

Use .card-flushclass to remove a card header and footer borders:

Title

Footer

<div class="card card-flush card-bordered">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body py-5">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts.

Featured

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

                <div class="card card-bordered text-center py-4">
  <h3 class="card-header d-block py-4 bg-light">Featured</h3>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card card-bordered mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card card-bordered">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

              <div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h3 class="card-title text-white">Card title</h3>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
</div>

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

             <div class="card card-bordered mb-3">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

              <div class="card-group">
  <div class="card card-bordered">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h3 class="card-title">Card title</h3>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-bordered">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h3 class="card-title">Card title</h3>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-bordered">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h3 class="card-title">Card title</h3>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Grid cards

Use the grid system and .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

             <div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card card-bordered">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

When you need equal height, add .h-100 to the cards.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a short card.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

        <div class="row row-cols-1 row-cols-md-4 g-4">
  <div class="col">
    <div class="card card-bordered h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-bordered h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Card Stretch

To have same height cards within BootstrapGrid use .card-{mode}or responsive .card-{breakpoint}-{mode}for sm, md, lg, xl, and xxl.

Where modeis one of:

stretch- for setting 100% stretch height
stretch-75- for setting 75% stretch height
stretch-50- for setting 50% stretch height
stretch-33- for setting 33.333% stretch height
stretch-25- for setting 25% stretch height