Cards

These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View Cards on Bootstrap ⟶

Basic Example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card" style="max-width: 30rem;">
  <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/05-f.jpg" alt="Card image cap" /></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a class="btn btn-primary btn-sm" href="#!">Go somewhere</a>
  </div>
</div>

Titles, text and links

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

<div class="card" style="max-width: 28rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a class="card-link" href="#">Card link</a><a class="card-link" href="#">Another link</a>
  </div>
</div>

List Groups

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<div class="card" style="max-width: 18rem">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Card with image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

<div class="card" style="max-width: 30rem;">
  <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="Card image cap" /></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body"><a class="card-link" href="#!">Card link</a><a class="card-link" href="#!">Another link</a></div>
</div>

Header and Fooder

Featured

Special title treatment

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

Go somewhere

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

Card Overlay

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card text-white" style="max-max-width: 30rem;">
  <div class="card-img overflow-hidden"><img class="img-fluid" src="../assets/img/gallery/07-f.jpg" alt="Card image" /></div>
  <div class="card-img-overlay d-flex align-items-end">
    <div>
      <h5 class="card-title text-white">Card title</h5>
      <p class="text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

Card Groups

First 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 45 mins ago

Second card title

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

Last updated an hour ago

Yet another 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 yesterday

<div class="card-group">
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">First card title</h5>
      <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 45 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/09-f.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Second card title</h5>
      <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 an hour ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/10-f.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Yet another card title</h5>
      <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 yesterday </small></p>
    </div>
  </div>
</div>

When using card groups with footers, their content will automatically line up.

Card Groups

First 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 45 mins ago

Second card title

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

Last updated an hour ago

Yet another 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 yesterday

<div class="card-group">
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">First card title</h5>
      <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 class="card-footer"><small class="text-muted">Last updated 45 mins ago</small></div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Second card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer"><small class="text-muted">Last updated an hour ago</small></div>
  </div>
  <div class="card">
    <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="Card image cap" /></div>
    <div class="card-body">
      <h5 class="card-title">Yet another card title</h5>
      <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>
    </div>
    <div class="card-footer"><small class="text-muted">Last updated yesterday</small></div>
  </div>
</div>

Grid cards

First 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.

Second 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.

Yet another card title

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

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">First card title</h5>
        <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"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Second card title</h5>
        <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"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Yet another card title</h5>
        <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>

Grid cards with equal Height

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass. And Just like with card groups, card footers will automatically line up.

First 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.

Last updated 45 mins ago

Second card title

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

Last updated an hour ago

Yet another card title

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

Last updated yesterday

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">First card title</h5>
        <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 class="card-footer"><small class="text-muted">Last updated 45 mins ago</small></div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Second card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer"><small class="text-muted">Last updated an hour ago</small></div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Yet another card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer"><small class="text-muted">Last updated yesterday</small></div>
    </div>
  </div>
</div>