Bootstrap 5 Card Group
A Bootstrap 5 Card Group renders multiple cards as a single connected unit with equal-height columns and flush borders between them — no gutters. Use it when you want cards to read as a cohesive block rather than independent tiles, such as a pricing tier comparison or a three-step process overview.
Primary Class
.card-groupCommon Use Cases
- →Side-by-side pricing plans where equal height ensures the CTA buttons align at the bottom of each card regardless of copy length
- →A three-column product comparison table styled as cards, making feature lists easier to scan without a traditional HTML table
- →Team profile cards on an About page where photo, name, role, and bio need consistent height across variable content
- →Step-by-step onboarding panels (Step 1, Step 2, Step 3) presented as a visually joined sequence to imply progression
Variants & Classes
| Variant | Description |
|---|---|
| Card Group Default | Standard card group with Bootstrap's default styling. |
| Card Group Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Starter</h5>
<p class="card-text">Perfect for freelancers and solo founders launching their first project.</p>
<p class="card-text"><strong>$9 / month</strong></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-primary w-100">Get Started</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Pro</h5>
<p class="card-text">Ideal for growing teams that need advanced analytics and priority support.</p>
<p class="card-text"><strong>$29 / month</strong></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary w-100">Get Started</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Enterprise</h5>
<p class="card-text">Custom pricing for organisations requiring SSO, SLAs, and dedicated onboarding.</p>
<p class="card-text"><strong>Contact us</strong></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-secondary w-100">Talk to Sales</a>
</div>
</div>
</div>Live Examples
Basic Card Group
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-footer to lock CTAs to the bottom
Place buttons inside a <code>.card-footer</code> element rather than at the end of <code>.card-body</code> — Bootstrap's flexbox column layout stretches the body to fill available space, so footers naturally align across all cards in the group.
Card Group breaks to a stacked layout below sm
By default, <code>.card-group</code> renders cards side-by-side from the <code>sm</code> breakpoint (576px) upward and stacks them vertically below it. If you need control over when stacking occurs, switch to <code>.card-group</code> inside a <code>.row</code> with column classes instead.
Remove inter-card borders selectively with CSS
Cards in a group share a border, but middle cards get their left border removed via Bootstrap's internal <code>:not(:first-child)</code> selector. If you need a visible divider between specific cards, add a custom <code>border-start</code> utility class directly on the card you want bordered.
Limit groups to 2–4 cards for readability
Beyond four cards, each column becomes too narrow on standard desktop widths (1200px), making text hard to read. For five or more items, use a <code>.row</code> with <code>row-cols-*</code> classes and individual cards with <code>h-100</code> instead.