Bootstrap 5Content

Bootstrap 5 Card Group

A Bootstrap 5 Card Group renders a set of cards as a single, unified block where each card shares equal height and flush borders between them — no gaps, no gutters. Use it when you need cards to feel like a cohesive panel rather than a grid of independent items, such as pricing tiers or feature comparisons displayed side by side.

Primary Class

.card-group

Common Use Cases

→Pricing plan comparison tables where three tiers (Free, Pro, Enterprise) must align their headers, bodies, and footers at identical heights regardless of content length
→Team member profiles on an About page where each card shows a photo, name, role, and bio — the equal-height layout prevents a ragged, mismatched row
→Product feature highlights grouping three or four key selling points (Speed, Security, Support, Uptime) as a unified strip beneath a hero section
→Step-by-step onboarding flows showing numbered process steps (Sign Up → Connect → Launch) as connected cards that visually imply a sequence

Variants & Classes

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

Code Example

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Free Plan</h5>
      <p class="card-text">Perfect for personal projects. Includes 1 site, 5 pages, and community support.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">$0 / month</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Pro Plan</h5>
      <p class="card-text">Ideal for freelancers and small teams. Unlimited pages, custom domain, and priority email support.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">$19 / month</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Enterprise Plan</h5>
      <p class="card-text">Built for agencies. White-label output, team seats, SLA-backed uptime, and a dedicated account manager.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">$99 / month</small>
    </div>
  </div>
</div>

Live Examples

Basic Card Group

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 group with custom colours
✓Card Group with interactive states
✓Responsive card group for all screen sizes

Best Practices

Use card footers to force bottom-alignment across uneven content

Because Card Group uses flexbox, adding a <code>card-footer</code> to every card in the group ensures price tags, CTAs, or disclaimers lock to the bottom of each card — even when the body text varies in length.

Card Group collapses to a stacked column on mobile automatically

Below Bootstrap's <code>sm</code> breakpoint (576px), cards in a group stack vertically and borders revert to standard rounded styles — no extra utility classes needed, but test your content order to make sure it reads logically when stacked.

Limit groups to four cards maximum for readability

Beyond four cards, the individual card width becomes too narrow on mid-range screens; switch to <code>row row-cols-*</code> with <code>card-deck</code> behaviour using gutters instead, which gives you more responsive breakpoint control.

Override the flush border between cards with a custom separator colour

Cards in a group share a single collapsed border via negative margins. Target <code>.card-group > .card + .card</code> in your CSS and set <code>border-left</code> explicitly to replace the default border colour with your brand accent.

FAQ

What is the difference between a Card Group and a card grid using row/col classes?

A Card Group fuses cards into one borderless block — cards touch each other with no gutter and share equal height automatically via flexbox. A row/col grid keeps each card visually separate with spacing between them, and you control responsive column counts using classes like <code>row-cols-1 row-cols-md-3</code>. Use a Card Group when the cards represent a single conceptual unit (e.g., pricing tiers); use a grid when cards are independent items that happen to sit near each other.

How do I highlight one card in a group — for example, a 'recommended' pricing tier?

Apply a background utility class like <code>bg-primary text-white</code> directly to the target <code>.card</code> element inside the group. You can also use a top border accent with <code>border-top border-primary border-3</code> combined with <code>mt-n1</code> to visually lift that card. For a stronger effect, add a negative top margin (<code>mt-n2</code>) and a <code>box-shadow</code> via a custom CSS class to make it protrude slightly above the others.

How does CanvasBuilder generate Card Group components?

When you describe a multi-column card layout in CanvasBuilder — such as 'three pricing plans side by side' — the AI evaluates whether the cards should be unified or spaced and outputs a <code>.card-group</code> wrapper when cohesion is the right choice. It applies your brand's primary colour to card footers or highlighted tiers automatically, sets appropriate card content based on your prompt, and outputs clean, production-ready HTML that works without any post-processing.