8 Bootstrap 5 Card Components You Should Be Using Right Now — Canvas Builder

Q: What is the difference between .card-deck and the Bootstrap 5 grid approach for cards?

.card-deck was removed in Bootstrap 5. The replacement is the native grid system using .row, .row-cols-*, and .g-* gutter utilities. This approach is more flexible because you can set different column counts at each breakpoint (row-cols-1 row-cols-md-2 row-cols-lg-3) and it integrates cleanly with all other grid behaviour rather than using a parallel layout system.

Q: How do I make all cards in a row the same height?

Add .h-100 to each .card element inside a flex row. Bootstrap’s grid uses flexbox, so columns automatically stretch to the tallest item in the row, and h-100 ensures the card fills that column height. This prevents short cards from appearing detached from the bottom of the row.

Q: Can I use Bootstrap 5 card components with the Canvas HTML Template?

Yes — the Canvas HTML Template is built on Bootstrap and exposes the full card API, plus additional skin variants and utility classes that extend the default component set. Canvas Builder can scaffold card layouts directly into Canvas pages, pre-wired with the correct class combinations.

Q: How does the stretched link utility work internally?

.stretched-link applies a ::after pseudo-element with position: absolute; inset: 0; to the anchor, expanding its click area to fill the nearest position: relative ancestor. Cards set position: relative by default, so no additional CSS is needed. Be careful when nesting stretched link cards inside other positioned containers — the click target will expand to that ancestor instead.

Q: What is the best card pattern for a mobile-first product listing page?

Start with the image cap card inside a row-cols-1 row-cols-sm-2 row-cols-lg-3 grid with g-4 gutters. Add .h-100 for height consistency and .stretched-link on the product anchor for maximum touch target size on mobile. If screen width is a constraint, the horizontal card at small breakpoints and a standard image cap at medium and above gives you a clean responsive progression.

Most Bootstrap projects barely scratch the surface of what the card component can do — teams reach for the same basic layout while more powerful, time-saving variations sit unused in the documentation.

Key Takeaways

Bootstrap 5 ships with at least eight distinct card patterns, each solving a different UI problem without custom CSS.
Choosing the right card variant — horizontal, overlay, list group, or stretched link — directly reduces layout complexity and improves page scannability.
Every component below is copy-pasteable and production-ready for 2025 projects built on the Canvas HTML Template.
Canvas Builder can generate and configure card layouts automatically, saving you the manual wiring every time.

Basic Card with Header and Footer

The foundation of all Bootstrap 5 card components, the header-body-footer card is the most versatile layout block you will use. The .card-header and .card-footer elements inherit a muted background by default and pair naturally with utility classes for typography, borders, and spacing. Use this pattern for pricing tables, account summaries, and any content that benefits from a clear top-and-bottom boundary.

<div class="card">
  <div class="card-header">Featured Plan</div>
  <div class="card-body">
    <h5 class="card-title">Pro Membership</h5>
    <p class="card-text">Unlock all premium features with a single subscription. Cancel anytime.</p>
    <a href="#" class="btn btn-primary">Get Started</a>
  </div>
  <div class="card-footer text-muted">14-day free trial included</div>
</div>

Card with Image Cap

Image-topped cards are the backbone of blog listings, portfolio grids, and product catalogs. Adding .card-img-top to an <img> tag automatically rounds the top corners to match the card border radius. For full bleed imagery without any text overlap, this is the cleanest approach. Pair with Bootstrap Grid Calculator to dial in the column widths for three- or four-column article grids.

<div class="card" style="max-width: 360px;">
  <img src="https://picsum.photos/360/200" class="card-img-top" alt="Article thumbnail">
  <div class="card-body">
    <h5 class="card-title">Designing Faster Layouts in 2025</h5>
    <p class="card-text">How modern template tools are changing the way front-end teams prototype.</p>
    <a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
  </div>
</div>

Horizontal Card

The horizontal card places an image beside the content using the grid system, making it ideal for media object-style layouts: podcast episodes, news teasers, team member profiles, and search results. Use .row.g-0 inside the card and size image and text columns independently. This is one of the most underused Bootstrap card examples in real projects, yet it solves a layout problem that otherwise requires custom flexbox work.

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://picsum.photos/160/200" class="img-fluid rounded-start h-100 object-fit-cover" alt="Team member">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Sarah Chen</h5>
        <p class="card-text">Lead UI Engineer with a focus on design systems and component architecture.</p>
        <p class="card-text"><small class="text-muted">Joined January 2023</small></p>
      </div>
    </div>
  </div>
</div>

Card with List Group

Embedding a .list-group.list-group-flush inside a card removes the outer borders from the list so it blends seamlessly with the card’s edge. This pattern is perfect for settings panels, navigation menus inside sidebars, and feature comparison breakdowns. The flush variant is critical here — without it you end up with a double-border artifact that breaks the visual coherence of the component.

<div class="card" style="max-width: 320px;">
  <div class="card-header">Plan Features</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Unlimited projects</li>
    <li class="list-group-item">Priority support</li>
    <li class="list-group-item">Custom domain</li>
    <li class="list-group-item">Advanced analytics</li>
  </ul>
  <div class="card-body">
    <a href="#" class="btn btn-success w-100">Upgrade Now</a>
  </div>
</div>

Card Grid Layout

Bootstrap 5 retired the old .card-deck in favour of the grid system combined with .row-cols-* utilities. This change gives you far more responsive control — you can specify column counts per breakpoint with a single line of classes, and every card in the row stretches to equal height automatically via flexbox. Use .h-100 on each card to enforce uniform height across cards with varying content lengths, which is essential for production-quality Bootstrap 5 UI components.

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Component One</h5>
        <p class="card-text">Short description for the first card in the grid.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Component Two</h5>
        <p class="card-text">A longer description that demonstrates equal-height card behaviour across the row without any extra CSS.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Component Three</h5>
        <p class="card-text">Third card, equal height guaranteed.</p>
      </div>
    </div>
  </div>
</div>

Card with Image Overlay

The image overlay card layers text content directly on top of a full-bleed background image using .card-img-overlay. It is the right choice for hero-style feature blocks, editorial covers, and event cards where the image carries the primary visual weight. Always apply a dark background utility or a semi-transparent overlay element when placing text over photos — contrast ratios matter for accessibility compliance in 2025 and beyond.

<div class="card text-white border-0" style="max-width: 400px;">
  <img src="https://picsum.photos/400/250" class="card-img" alt="Event background">
  <div class="card-img-overlay d-flex flex-column justify-content-end" style="background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);">
    <h5 class="card-title mb-1">Design Summit 2025</h5>
    <p class="card-text mb-2"><small>15–17 October · Berlin</small></p>
    <a href="#" class="btn btn-light btn-sm align-self-start">Register</a>
  </div>
</div>

Stretched Link Card

The stretched link utility class .stretched-link expands a card’s anchor tag to cover the entire card surface area, making the whole block clickable without wrapping the card in an anchor tag. This dramatically improves touch target size on mobile and removes the need for JavaScript click handlers. Apply it to any <a> inside a card that has position: relative (cards already have this). It is one of the most practical yet least-known Bootstrap card examples in daily use.

<div class="card" style="max-width: 320px;">
  <img src="https://picsum.photos/320/180" class="card-img-top" alt="Article image">
  <div class="card-body">
    <h5 class="card-title">The Future of CSS Grid</h5>
    <p class="card-text">Subgrid support has arrived across all major browsers. Here is what it means for your layouts.</p>
    <a href="#" class="btn btn-primary stretched-link">Read Article</a>
  </div>
</div>

Card with Nav Tabs

Placing a .nav.nav-tabs inside .card-header creates a tabbed card that switches between content panels without any page reload. This pattern suits dashboards, settings interfaces, and product detail pages where multiple data views share the same real estate. The key is adding .card-header-tabs to the nav element, which strips the bottom border of the active tab so it visually merges with the card body beneath it — a subtle detail that most implementations miss.

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="dashboardTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab">Analytics</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">Settings</button>
      </li>
    </ul>
  </div>
  <div class="card-body tab-content">
    <div class="tab-pane fade show active" id="overview" role="tabpanel">
      <h5 class="card-title">Project Overview</h5>
      <p class="card-text">Summary metrics and recent activity appear here.</p>
    </div>
    <div class="tab-pane fade" id="analytics" role="tabpanel">
      <h5 class="card-title">Analytics</h5>
      <p class="card-text">Traffic, conversions, and engagement data displayed here.</p>
    </div>
    <div class="tab-pane fade" id="settings" role="tabpanel">
      <h5 class="card-title">Settings</h5>
      <p class="card-text">Notification preferences and account configuration options.</p>
    </div>
  </div>
</div>

Frequently Asked Questions

What is the difference between `.card-deck` and the Bootstrap 5 grid approach for cards?

.card-deck was removed in Bootstrap 5. The replacement is the native grid system using .row, .row-cols-*, and .g-* gutter utilities. This approach is more flexible because you can set different column counts at each breakpoint (row-cols-1 row-cols-md-2 row-cols-lg-3) and it integrates cleanly with all other grid behaviour rather than using a parallel layout system.

How do I make all cards in a row the same height?

Add .h-100 to each .card element inside a flex row. Bootstrap’s grid uses flexbox, so columns automatically stretch to the tallest item in the row, and h-100 ensures the card fills that column height. This prevents short cards from appearing detached from the bottom of the row.

Can I use Bootstrap 5 card components with the Canvas HTML Template?

Yes — the Canvas HTML Template is built on Bootstrap and exposes the full card API, plus additional skin variants and utility classes that extend the default component set. Canvas Builder can scaffold card layouts directly into Canvas pages, pre-wired with the correct class combinations.

How does the stretched link utility work internally?

.stretched-link applies a ::after pseudo-element with position: absolute; inset: 0; to the anchor, expanding its click area to fill the nearest position: relative ancestor. Cards set position: relative by default, so no additional CSS is needed. Be careful when nesting stretched link cards inside other positioned containers — the click target will expand to that ancestor instead.

What is the best card pattern for a mobile-first product listing page?

Start with the image cap card inside a row-cols-1 row-cols-sm-2 row-cols-lg-3 grid with g-4 gutters. Add .h-100 for height consistency and .stretched-link on the product anchor for maximum touch target size on mobile. If screen width is a constraint, the horizontal card at small breakpoints and a standard image cap at medium and above gives you a clean responsive progression.

These eight patterns cover the vast majority of real-world card use cases — and none of them require a single line of custom CSS. If you want to build and preview card layouts without manually wiring Bootstrap classes, try Canvas Builder free and generate production-ready card sections in seconds.