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 image cap
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="width: 20rem;">
  <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/g1.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 linkAnother link 
<div class="card" style="width: 18rem;">
  <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="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 image cap
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 linkAnother link
<div class="card" style="width: 20rem;">
  <div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/g3.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 image
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-width: 30rem;">
  <div class="card-img overflow-hidden"><img class="img-fluid" src="../assets/img/gallery/g9.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="card-text">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
Card image cap
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

Card image cap
Second card title

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

Last updated an hour ago

Card image cap
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/g4.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/g5.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/g6.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
Card image cap
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
Card image cap
Second card title

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

Last updated an hour ago
Card image cap
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/g4.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/g5.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/g6.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/g4.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/g5.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/g6.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/g4.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/g5.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/g6.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>