Cards

Cards

Cards are flexible boxes for content, with many optional pieces. The base class is .card.

Basic card structure

<div class="card">
  <div class="card-body">
    Basic card text.
  </div>
</div>

A full card with parts

Cards can contain a header, image, title, text, and footer:

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Card parts

• .card-header top section
• .card-body main content
• .card-footer bottom section
• .card-title title text
• .card-text body text
• .card-img-top image at the top
• .card-img-bottom image at the bottom

Card colors

Use background utilities on the card:

<div class="card bg-primary text-white">
  <div class="card-body">Colored card</div>
</div>

Header and footer example

<div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">Some content.</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Card groups

Use .card-group to make cards equal height and width in one row.

TL;DR

• The base class is .card.
• Common parts: header, body, title, text, footer, image.
• Use .bg-* utilities to color cards.
• .card-group makes equal-height cards.