Bootstrap 5

Bootstrap 5 Card Deck Grid

A Card Deck Grid in Bootstrap 5 uses the CSS Grid or Flexbox row/column system to display equal-height cards in a responsive multi-column layout. It replaced the deprecated `.card-deck` class from Bootstrap 4, relying instead on `.row`, `.col-*`, and `.h-100` utilities to achieve consistent card sizing across breakpoints. Use it when you need to present comparable items — products, team members, pricing tiers — side by side with uniform height regardless of content length.

Primary Class

.card-deck

Common Use Cases

→Displaying a SaaS pricing table with three tiers (Starter, Pro, Enterprise) where each card contains a feature list of varying length but must align at the same bottom edge for the CTA button
→Rendering a product category grid on an e-commerce page, showing product image, name, short description, and price in consistent card frames across a 2-col mobile / 4-col desktop layout
→Building a team directory where each staff card has a headshot, name, role, and bio — cards auto-equalize height so the grid never looks ragged when bios differ in word count
→Presenting a blog post listing with featured image, category badge, headline, excerpt, and read-time chip, keeping all cards flush in a 3-column desktop grid with a single gutter width

Variants & Classes

Variant	Description	Classes
Card Deck Grid Default	Standard card deck grid with Bootstrap's default styling.	`card-deck`
Card Deck Grid Responsive	Responsive variant that adapts to different screen sizes.	`card-deck card-deck-responsive`

Code Example

<div class="container py-5">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

    <div class="col">
      <div class="card h-100 shadow-sm">
        <img src="/assets/img/plan-starter.jpg" class="card-img-top" alt="Starter Plan">
        <div class="card-body">
          <span class="badge bg-secondary mb-2">Starter</span>
          <h5 class="card-title">Launch Your First Project</h5>
          <p class="card-text">Everything a solo founder needs to ship fast — 3 active projects, 5 GB storage, and community support.</p>
        </div>
        <div class="card-footer bg-transparent border-top-0">
          <a href="/signup?plan=starter" class="btn btn-outline-primary w-100">Get Started Free</a>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100 shadow-sm border-primary">
        <img src="/assets/img/plan-pro.jpg" class="card-img-top" alt="Pro Plan">
        <div class="card-body">
          <span class="badge bg-primary mb-2">Most Popular</span>
          <h5 class="card-title">Scale Without Limits</h5>
          <p class="card-text">Unlimited projects, 50 GB storage, priority email support, and advanced analytics built in from day one.</p>
        </div>
        <div class="card-footer bg-transparent border-top-0">
          <a href="/signup?plan=pro" class="btn btn-primary w-100">Start Pro Trial</a>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100 shadow-sm">
        <img src="/assets/img/plan-enterprise.jpg" class="card-img-top" alt="Enterprise Plan">
        <div class="card-body">
          <span class="badge bg-dark mb-2">Enterprise</span>
          <h5 class="card-title">Built for Your Team</h5>
          <p class="card-text">SSO, audit logs, dedicated account manager, SLA guarantee, and custom onboarding for teams of 20 or more.</p>
        </div>
        <div class="card-footer bg-transparent border-top-0">
          <a href="/contact" class="btn btn-outline-dark w-100">Contact Sales</a>
        </div>
      </div>
    </div>

  </div>
</div>

Live Examples

Basic Card Deck Grid

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated card deck grid with custom colours
✓Card Deck Grid with interactive states
✓Responsive card deck grid for all screen sizes

Best Practices

Use `card-footer` to pin CTAs to the card bottom

When cards have different content lengths, place your button inside `.card-footer` rather than at the end of `.card-body`. Combined with `.h-100` on the card, Bootstrap's flexbox layout pushes the footer to the bottom edge automatically — no custom CSS needed.

Control gutter size with `g-*` utilities, not padding hacks

Bootstrap 5 gutters (`g-4`, `gx-3`, `gy-5`, etc.) apply spacing through CSS custom properties on the row — changing `g-4` to `g-2` halves both horizontal and vertical gaps in one class swap, keeping your markup clean and your spacing consistent at all breakpoints.

Combine `row-cols-*` with a single `col` class for flexible grids

Setting column counts at the row level (`row-cols-1 row-cols-md-2 row-cols-xl-4`) means you never have to touch individual card markup to reflow the grid — add or remove cards freely and the layout adjusts automatically without orphaned wide columns.

Use `border-primary` or a custom border variable to highlight a featured card

Adding `border-primary` and a slightly increased border width via inline style (`style="border-width: 2px"`) or a utility override gives a visual 'recommended' treatment to one card without breaking equal-height alignment or requiring a wrapper div.

FAQ

Why was `.card-deck` removed in Bootstrap 5 and what should I use instead?

Bootstrap 4's `.card-deck` used a negative-margin flexbox hack that caused issues with responsive breakpoints and gutters. Bootstrap 5 replaced it with the standard grid system: wrap your cards in `.row` with `.row-cols-*` responsive classes and add `.h-100` to each `.card` element. The gutter system (`g-*`) handles spacing cleanly, and `row-cols-*` lets you define how many columns appear at each breakpoint directly on the row. The result is more predictable, easier to override, and consistent with how every other grid layout in Bootstrap 5 works.

How do I make all cards in the deck the same height even when content lengths differ?

Add `.h-100` to the `.card` element — this stretches each card to fill the full height of its `.col` wrapper, which Bootstrap equalises via flexbox on the `.row`. For the card's internal layout to also stretch (e.g., pushing a footer button to the bottom), Bootstrap cards already use `display: flex; flex-direction: column` internally, so `.card-body` with `flex: 1 1 auto` (the default) expands to fill available space. No custom CSS is required for basic equal-height behaviour.

How does CanvasBuilder generate Card Deck Grid layouts from a prompt?

When you describe a card grid in CanvasBuilder — for example, 'show three pricing plans side by side' — the AI outputs a fully structured Bootstrap 5 `.row.row-cols-1.row-cols-md-3.g-4` layout with `.h-100` cards, populated with your actual content. It applies your brand's primary colour to badges, borders, and CTA buttons using Bootstrap's CSS custom property overrides, and wraps everything in semantic HTML so the output is immediately deployable without post-processing.