Bootstrap 5 Card Components: All Variants With Live Examples

The Bootstrap 5 card component is one of the most versatile building blocks in the entire framework. Whether you are building a blog grid, a pricing table, a product listing, a team member section, or a dashboard widget, cards are almost certainly going to be part of your layout. Yet most developers only scratch the surface of what Bootstrap card variants can actually do.

In this guide we are going to walk through every major Bootstrap card variant — from the basic structure right through to horizontal cards, card groups, overlay cards, and custom styled cards — with real code examples you can copy directly into your project. By the end you will have a solid mental model of the full card API and know exactly which variant to reach for in any given design situation.

If you are still getting comfortable with Bootstrap 5 layouts in general, it is worth reading our Bootstrap 5 Grid System: The Complete Guide for 2026 first, since cards almost always live inside a grid wrapper. Once you have cards mastered, layering them into a full landing page is straightforward — our guide on How to Build a Landing Page with Bootstrap 5 in Under 1 Hour shows exactly how that works end to end.

The Anatomy of a Bootstrap 5 Card

Before jumping into variants, you need to be fluent with the core building blocks. A Bootstrap 5 card is a <div> with the class .card. Everything inside is optional but follows a predictable structure.

<div class="card" style="width: 20rem;">
  <img src="thumbnail.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">A short description that supports the card title and gives context.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

The key classes and their roles:

• .card — The outer wrapper. Sets position: relative, a white background, a subtle border, and border-radius.
• .card-body — The primary padded content area. This is where your text, buttons, and form elements live.
• .card-title — Applied to an <h5> (or any heading level). Adds bottom margin.
• .card-subtitle — Applied to an <h6>. Uses muted text and negative top margin to sit close to the title.
• .card-text — Applied to a <p>. Removes bottom margin on the last child.
• .card-link — Applied to an <a> tag inside .card-body. Adds spacing between adjacent links.
• .card-img-top / .card-img-bottom — Rounds the top or bottom corners of an image to match the card border.
• .card-header / .card-footer — Grey-tinted top and bottom sections with their own padding and border.

Cards With Headers and Footers

Adding a header and footer gives your card a more structured, dashboard-style appearance. Headers and footers are particularly useful for pricing cards, feature boxes, and data widgets.

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special offer</h5>
    <p class="card-text">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

You can also place a <blockquote> with the .blockquote class inside a card body for quote-style cards — a common pattern for testimonials. The footer then becomes a natural .blockquote-footer attribution area. For more on Bootstrap typographic patterns that complement this approach, see our Bootstrap 5 Typography: Fonts, Sizes, and Hierarchy Explained guide.

Bootstrap Card Colour Variants

Bootstrap 5 removed dedicated colour modifier classes for cards (like the old .card-primary from Bootstrap 3/4). Instead, you apply standard background and text utilities directly. This is more flexible and consistent with the rest of the utility-first design in Bootstrap 5.

<div class="card text-bg-primary mb-3">
  <div class="card-header">Primary</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>

<div class="card text-bg-success mb-3">
  <div class="card-header">Success</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>

<div class="card text-bg-danger mb-3">
  <div class="card-header">Danger</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>

The text-bg-* helper (introduced in Bootstrap 5.2) automatically sets both the background colour and a contrasting text colour in a single class. For outline-style coloured cards, use border-* on the outer .card and text-* on the .card-header:

<div class="card border-warning mb-3">
  <div class="card-header text-warning">Warning</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text text-muted">Some quick example text.</p>
  </div>
</div>

Image Overlay Cards

An image overlay card places the card body on top of an image rather than below it. This is a popular pattern for hero-style blog post cards, portfolio thumbnails, and event listings.

<div class="card text-bg-dark">
  <img src="bg-image.jpg" class="card-img" alt="Background image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in.
    </p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Note the difference: .card-img (instead of .card-img-top) makes the image fill the full card area including corners. The .card-img-overlay is then absolutely positioned over it. For legibility, combine this with text-bg-dark or add a CSS gradient overlay on the image itself.

Horizontal Cards

Horizontal cards combine the Bootstrap grid with the card component. They are ideal for list-style layouts — search results, article previews, and product rows where an image sits beside the content rather than above it.

<div class="card mb-3">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="thumbnail.jpg" class="img-fluid rounded-start" alt="Card image">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a wider card with supporting text below as a natural lead-in to additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>

The class .g-0 removes the gutter so the image sits flush against the card edge. .rounded-start rounds only the left corners of the image, matching the card’s own rounded corners on the left side.

Card Groups, Grids, and Equal Height

One of the most common pain points when using cards in a multi-column layout is unequal card heights when the content length varies. Bootstrap 5 solves this neatly.

Card Groups

A .card-group renders cards as a single attached unit with no gap between them and equal heights via Flexbox:

<div class="card-group">
  <div class="card">
    <img src="img1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Short description.</p>
    </div>
  </div>
  <div class="card">
    <img src="img2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">A much longer description that takes up considerably more vertical space than the others around it.</p>
    </div>
  </div>
  <div class="card">
    <img src="img3.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Short description.</p>
    </div>
  </div>
</div>

Grid Cards With Equal Height

For a gapped grid with independent cards (not merged), use .row-cols-* with h-100 on the card:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="img1.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Short body text.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="img2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A longer body text that pushes the footer further down.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

The h-100 class makes each card stretch to fill its column, which in a Flexbox row means all cards in the same row become equal height. The g-4 adds a consistent gap between columns and rows.

Bootstrap Card Variants: Quick Comparison

Here is a reference table comparing the main Bootstrap card variants by use case, key classes, and behaviour:

Advanced Card Customisation and Real-World Patterns

Beyond the core variants, there are several patterns you will encounter repeatedly in real projects. Here are the most important ones.

List Group Inside a Card

Placing a .list-group-flush inside a card removes the outer borders from the list group so it flows seamlessly within the card boundaries:

<div class="card" style="width: 18rem;">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Feature one</li>
    <li class="list-group-item">Feature two</li>
    <li class="list-group-item">Feature three</li>
  </ul>
  <div class="card-body">
    <a href="#" class="btn btn-primary w-100">Get started</a>
  </div>
</div>

Making an Entire Card Clickable

A popular UX pattern is a fully clickable card. The cleanest Bootstrap 5 approach uses the .stretched-link utility on the anchor inside the card body, which stretches its pseudo-element to cover the entire card:

<div class="card">
  <img src="thumbnail.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Clickable card</h5>
    <p class="card-text">Click anywhere on this card.</p>
    <a href="#" class="btn btn-primary stretched-link">Read more</a>
  </div>
</div>

Custom Hover Effect

Bootstrap does not ship a hover state for cards, but adding one is trivial with a small CSS block:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

This gives a subtle lift effect on hover that works beautifully for blog grids and portfolio layouts. In How to Customise a Bootstrap 5 HTML Template Without Breaking It, we go deeper into how to safely extend Bootstrap’s component defaults without overriding the source files.

If you are working with a premium template like Canvas Template, many of these patterns are already pre-built as component variants — the card hover effects, image overlays, and equal-height grids come included and are customisable via Sass variables and utility overrides. That alone saves hours on a typical agency project. If you would rather skip the code entirely, CanvasBuilder — the AI website builder built on top of Canvas — lets you compose card-based sections visually, which is particularly useful for prototyping before you hand off to a developer.

Card With Navigation Tabs

For tabbed card content — common in dashboards and documentation — place a .nav.nav-tabs inside the .card-header:

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">Tab content goes here.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

The .card-header-tabs class removes the bottom border from the tab strip and aligns it flush with the card header, creating a seamless appearance.

Integrating Cards Into Full Page Layouts

Cards rarely live in isolation. In real projects they sit inside section containers, are filtered by JavaScript, or are dynamically rendered from a CMS or API. A few layout principles to keep in mind:

• Always wrap card grids in a .container or .container-fluid to respect your page’s horizontal rhythm. Pairing this with the responsive column classes (row-cols-1 row-cols-sm-2 row-cols-lg-3) gives you a mobile-first cascade with zero media query custom code.
• Use gap utilities (g-3, g-4) rather than manual margin classes on cards. The gutter system in Bootstrap 5 distributes space evenly and avoids the “extra margin on the last column” problem that plagued Bootstrap 3 and 4.
• Pair cards with your navbar structure. If you are building a site section by section, our Bootstrap 5 Navbar: 8 Customisation Patterns You Need to Know guide covers how to make the navigation sit cleanly above card-heavy content sections.
• Test card layouts at every breakpoint. The most common breakage points are at sm (576px) and lg (992px) — use browser DevTools responsive mode during development.

Frequently Asked Questions

What is the difference between .card-group and a row with .row-cols-* for card layouts?

.card-group merges cards into a single unit by removing the gap between them and collapsing their individual borders into shared borders. It also equalises height automatically. A .row with .row-cols-* keeps cards as independent elements with gutters between them. Use .card-group when you want a connected, comparison-style layout; use the row/column approach when you want visually separate cards in a grid.

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

Add h-100 to the .card element inside each column. Because each .col in a Bootstrap row is a Flexbox child, h-100 stretches the card to fill its column height. The row sets all columns to equal height, so all cards end up uniform. If you also want the footer pinned to the bottom, use d-flex flex-column on the card and mt-auto on the .card-footer.

Can I use Bootstrap 5 cards without jQuery?

Yes. Bootstrap 5 dropped the jQuery dependency entirely. All Bootstrap 5 JavaScript (dropdowns, modals, tabs) is written in vanilla ES6. Cards themselves are pure CSS components with no JavaScript dependency at all, so they work in any project regardless of your JavaScript stack.

How do I add a hover effect to a Bootstrap 5 card?

Bootstrap does not ship a built-in hover state for cards. Add your own with a small CSS rule: set transition on .card and then define a .card:hover rule with transform: translateY(-4px) and an elevated box-shadow. This gives a clean “lift” effect. For production sites, a premium template like Canvas includes polished hover variants out of the box.

What replaced .card-columns in Bootstrap 5?

Bootstrap 4 had .card-columns which used CSS Multi-column layout to create a masonry-style card layout. This was removed in Bootstrap 5 because it had awkward ordering behaviour (columns filled top-to-bottom, not left-to-right). The recommended Bootstrap 5 replacement is either the CSS Grid masonry spec (still experimental in browsers as of 2026) or a lightweight JavaScript masonry library like Masonry.js paired with Bootstrap’s grid classes.