Cards

The card is Bootstrap 5's single most-reused component: a flexible, bordered content container with optional header, footer, image and a body that can hold titles, text, links, lists — almost anything. Every "tile" you've seen on a modern website — a product tile, a blog preview, a pricing plan, a profile — is usually just a card with different contents inside the same handful of building-block classes. TrailMap's entire trail-listing page is built from one repeated card.

1. The Building Blocks: .card, .card-body, .card-title, .card-text

.card is the outer border/box. Inside it, .card-body adds consistent padding around its contents. .card-title styles a heading with card-appropriate margins, and .card-text styles a paragraph the same way.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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>

2. Images: .card-img-top

An image with .card-img-top, placed as the first child of .card (before .card-body), automatically gets rounded top corners matching the card and stretches to the card's full width.

<div class="card" style="width: 18rem;">
  <img src="ridgeline-loop.jpg" class="card-img-top" alt="Ridgeline Loop trail">
  <div class="card-body">
    <h5 class="card-title">Ridgeline Loop</h5>
    <p class="card-text">A steady climb rewarded with panoramic valley views.</p>
  </div>
</div>

3. Header and Footer: .card-header, .card-footer

.card-header and .card-footer add a visually separated strip at the top or bottom of the card, outside .card-body, useful for a title bar or a small metadata line.

<div class="card">
  <div class="card-header">Featured Trail</div>
  <div class="card-body">
    <h5 class="card-title">Ridgeline Loop</h5>
    <p class="card-text">4.6 mi loop, moderate difficulty.</p>
  </div>
  <div class="card-footer text-muted">Last updated 3 days ago</div>
</div>

4. Laying Out Multiple Cards With the Grid

Bootstrap 5 dropped the old .card-group/.card-deck pattern in favor of just using the regular grid: put each card inside a .col, inside a .row that has .row-cols-* to control how many cards sit per row at each breakpoint.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Ridgeline Loop</h5>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Cedar Creek Trail</h5>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Summit Vista</h5>
      </div>
    </div>
  </div>
</div>

5. Worked Example: The Full TrailMap Trail Card

This is the signature reusable card used across TrailMap's trail-listing page: image, title with a "New" badge, a difficulty badge and distance badge from earlier lessons, a short description, and a "View Trail" button — everything below fits inside one .card.

<div class="card h-100" style="width: 18rem;">
  <img src="ridgeline-loop.jpg" class="card-img-top" alt="Ridgeline Loop trail">

  <div class="card-body d-flex flex-column">
    <h5 class="card-title text-truncate">
      Ridgeline Loop
      <span class="badge bg-success">New</span>
    </h5>

    <p class="mb-2">
      <span class="badge bg-warning text-dark">Moderate</span>
      <span class="badge rounded-pill bg-secondary">4.6 mi</span>
    </p>

    <p class="card-text">
      A steady climb through pine forest, rewarded with a panoramic valley
      view at the summit overlook.
    </p>

    <a href="#" class="btn btn-success mt-auto">View Trail</a>
  </div>
</div>