Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Basic Card

Card with Image

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">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">...</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card with Header and Footer

Featured

Special title treatment

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

Go somewhere

2 days ago

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">...</div>
  <div class="card-footer text-body-secondary">2 days ago</div>
</div>

Horizontal Card

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 with Navigation

Special title treatment

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

Go somewhere