Overview

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Card Example

Cards use a wrapper of class .card followed by a .card-body container.

.card-title and .card-subtitle are used to space out the title and subtitle appropriately.

Card title

Card subtitle

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: 18rem;">
  <div class="card-body">
    <h4 class="card-title" id="card-title">Card title</h4>
    <h5 class="card-subtitle mb-2 text-muted" id="card-subtitle">Card subtitle</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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card with Image

To add an image to the top of the card, use .card-img-top

Card image cap

Card Title

Card Subtitle

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://fakeimg.pl/286x150/" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title" id="card-title-1">Card Title</h4>
    <h5 class="card-subtitle mb-2 text-muted" id="card-subtitle-1">Card Subtitle</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>

Cards can also have a header and footer. Simply use the classes .card-header and .card-footer

Card Header

Card Title

Card Subtitle

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

<div class="card" style="width: 18rem;">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    <h4 class="card-title" id="card-title-2">Card Title</h4>
    <h5 class="card-subtitle mb-2 text-muted" id="card-subtitle-2">Card Subtitle</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 class="card-footer">Card Footer</div>
</div>

Customizing Cards

Cards primarily serve as containers to organize content for your needs. They can be combined with other UI elements and utility classes for a broad range of customization

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.

  • List Item
  • List Item with Badge 14
  • List Item
<div class="card border-dark shadow" style="width: 18rem;">
  <img class="card-img-top" src="https://fakeimg.pl/286x150/" alt="Card image cap">
  <div class="card-body">
    <h3 class="card-title" id="card-title-3">Card title</h3>
    <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">List Item</li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      List Item with Badge
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item">List Item</li>
  </ul>
  <div class="card-footer text-right">
    <a href="#" class="card-link">Link</a>
    <a href="#" class="card-link btn btn-primary">Button</a>
  </div>
</div>