Cards

Cards are the most versatile container in Bootstrap: a bordered, padded box that can hold headers, images, text, lists, links and footers in any combination. Product tiles, blog previews, pricing tables and dashboard widgets are all cards under the hood. This lesson covers card anatomy, image placement, layout patterns and how to combine cards with the grid.

Basic Card Anatomy

html

<div class="card" style="width: 20rem;">
  <img src="course.jpg" class="card-img-top" alt="Course cover">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Basics</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Beginner course</h6>
    <p class="card-text">Learn responsive design with the most popular CSS framework.</p>
    <a href="#" class="btn btn-primary">Start learning</a>
  </div>
</div>

The .card-body provides the internal padding; .card-title, .card-subtitle and .card-text apply sensible margins so content stacks cleanly. .card-img-top rounds only the top corners of the image to match the card radius.

Headers, Footers and Lists

Cards accept structural sections outside the body:

html

<div class="card">
  <div class="card-header fw-semibold">Order summary</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item d-flex justify-content-between"><span>Subtotal</span><span>$40</span></li>
    <li class="list-group-item d-flex justify-content-between"><span>Shipping</span><span>$5</span></li>
  </ul>
  <div class="card-footer text-body-secondary">Updated just now</div>
</div>

list-group-flush removes the list borders so items blend into the card edges. Headers and footers get a subtle background that separates them from the body.

Image Overlays

For hero-style tiles, place text on top of the image with .card-img-overlay:

html

<div class="card text-white">
  <img src="banner.jpg" class="card-img" alt="Banner">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Summer Sale</h5>
    <p class="card-text">Up to 50% off all courses.</p>
  </div>
</div>

Make sure the image is dark enough (or add a gradient) for the overlay text to stay readable.

Laying Out Multiple Cards

The recommended pattern is grid plus h-100:

html

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

h-100 stretches every card to the height of its row, so uneven text lengths do not create ragged bottoms. Bootstrap also offers .card-group (cards fused edge to edge with equal height) for simpler cases, but the grid approach gives you responsive control.

Styling Cards

Cards accept the color, border and shadow utilities from earlier lessons: text-bg-dark for a dark card with correct text contrast, border-0 shadow-sm for a modern borderless look, or bg-primary bg-opacity-10 for a tinted panel. To make a whole card clickable, use a stretched link:

html

<a href="/course" class="stretched-link">Details</a>

Placed inside a card with position-relative (cards have it by default), the stretched link expands its clickable area to the entire card while keeping valid, accessible markup.

Key Takeaways

Cards combine optional headers, images, bodies, lists and footers freely.
card-img-top fits images to the card radius; card-img-overlay puts text on images.
Use grid rows with row-cols-* and h-100 for equal-height card galleries.
stretched-link makes an entire card clickable with clean markup.

Next lesson: Forms and Input Groups, where user input gets the Bootstrap treatment.