Cards

A card is a bordered, padded box for grouping a self-contained chunk of content — an image, a heading, some text, and maybe a button — and it's one of the most reused components in Bootstrap because so many UI patterns (a product tile, a blog preview, a profile summary) are really just variations on the same box.

Basic structure

<div class="card" style="width: 18rem;">
  <img src="landscape.jpg" class="card-img-top" alt="Mountain landscape at sunset" />
  <div class="card-body">
    <h5 class="card-title">Mountain Retreat</h5>
    <p class="card-text">
      A quiet weekend getaway, three hours from the city.
    </p>
    <a href="#" class="btn btn-primary">Book now</a>
  </div>
</div>

.card provides the border, background, and rounded corners. .card-img-top stretches an image to the card's full width with square top corners matching the card's radius. Everything text-related — title, body copy, links — goes inside .card-body, which adds consistent internal padding so you don't have to think about spacing every time you build a new card.

Headers, footers, and lists

Cards support optional header and footer sections, useful for things like a card's date or a call-to-action bar:

<div class="card">
  <div class="card-header">Featured Article</div>
  <div class="card-body">
    <h5 class="card-title">Understanding the CSS Box Model</h5>
    <p class="card-text">Margin, border, padding, and content — in that order.</p>
  </div>
  <div class="card-footer text-muted">Posted 3 days ago</div>
</div>

You can also drop a plain list directly into a card, instead of a .card-body, when the content is really just a set of related items:

<div class="card">
  <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>

list-group-flush removes the list's own rounded corners and outer border so it blends seamlessly into the card around it.

Cards in a grid

Cards are almost always used in groups, and they combine naturally with the grid system from earlier lessons:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">Card 1</div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">Card 2</div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">Card 3</div>
    </div>
  </div>
</div>

row-cols-1 row-cols-md-3 is shorthand for "one card per row on mobile, three per row from md up" — a cleaner alternative to manually adding col-4 to every card. The h-100 on each card is worth remembering: without it, a row of cards with different amounts of text ends up with mismatched heights, since each card only grows tall enough for its own content by default.