Cards: Bootstrap's Flexible Content Box

A card is a flexible, bordered box used to group related content, such as an image, a title and some descriptive text, and it is one of the most widely used components across real Bootstrap sites, from blog previews to product listings.

A basic card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some text.</p>
  </div>
</div>

Adding an image

<div class="card">
  <img src="photo.jpg" class="card-img-top">
  <div class="card-body">...</div>
</div>

card-img-top automatically rounds the image's top corners to match the card itself and stretches it to fill the card's width.

Headers, footers and lists

<div class="card">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item one</li>
    <li class="list-group-item">Item two</li>
  </ul>
  <div class="card-footer text-muted">Updated recently</div>
</div>

Combining a header, a list group and a footer inside one card is a common pattern for things like a small settings panel or a short summary widget.

Adding a call to action

<div class="card-body">
  <a href="#" class="btn btn-primary">Read more</a>
</div>

Cards in a grid

<div class="row g-3">
  <div class="col-md-4"><div class="card h-100">...</div></div>
  <div class="col-md-4"><div class="card h-100">...</div></div>
</div>

Adding h-100 makes every card stretch to the full height of its column, so a row of cards with differing amounts of text still lines up evenly along the bottom instead of leaving ragged gaps.

Overlaying text on an image

A card-img-overlay places text directly on top of a background image, useful for a featured article or a promotional banner:

<div class="card text-white">
  <img src="banner.jpg" class="card-img">
  <div class="card-img-overlay">
    <h5 class="card-title">Featured</h5>
  </div>
</div>

Why cards are so common

Their appeal comes from being genuinely flexible: the same handful of classes can present a product, a blog post, a user profile or a dashboard statistic, which is exactly why cards show up in almost every real Bootstrap-based website rather than staying confined to one specific use case.