Cards

A card is a small, self-contained box for a chunk of content — an image, a title, some text, maybe a button — with a border, rounded corners, and consistent internal padding. It's one of the most-reused components in Bootstrap, since so much web content naturally comes in "card-shaped" chunks.

A basic card

HTML index.html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Rendered result

A single box, roughly 288px wide, with a thin light-gray border and slightly rounded corners. Inside, comfortably padded: a bold "Card title" heading, a line of gray-ish body text below it, and a blue "Go somewhere" button at the bottom.

Adding an image

HTML index.html

<div class="card" style="width: 18rem;">
  <img src="thumbnail.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with image</h5>
    <p class="card-text">The image fills the card's full width, corners rounded to match.</p>
  </div>
</div>

Rendered result

The same bordered card as before, but now with an image spanning the full width across the top, its top two corners rounded to match the card's own corners, with the title and text sitting in the padded body section beneath it.

card-img-top specifically rounds only the top corners (to match the card) and removes any default image spacing — a plain <img> without that class would leave a small gap and square corners that clash with the card around it.

A row of cards

Combine cards with the grid from lesson 2 to lay several out evenly, wrapping responsively:

HTML index.html

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

Rendered result

On a wide screen: three equal-width cards in a single row, with consistent gaps between them (the g-4 gap utility). On a narrow screen: the same three cards stack one per row, full width, since row-cols-1 is the default below the md breakpoint.

Note: row-cols-md-3 controls how many cards fit per row, but it doesn't automatically make cards the same height when their content differs in length — a card with three lines of text will be visibly taller than one with a single line next to it. Bootstrap has a separate h-100 utility class specifically for equalizing card heights within a row when that matters.

PreviousNavbar NextAlerts & Badges