Bootstrap 5Content

Bootstrap 5 Card Group

Q: How does Card Group achieve equal-height cards without JavaScript?

Bootstrap 5 applies display: flex to the .card-group wrapper and each card inside it is a flex child set to flex: 1 0 0%. This means all cards stretch to the height of the tallest card in the group. Within each card, .card-body has flex: 1 1 auto so it expands to fill the remaining space, pushing the .card-footer to the bottom consistently.

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.

Bootstrap class

.card-group

Common 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 and classes

Variant	Description and classes	Classes
Connected cards	Equal-height cards joined with shared borders.`card-group + card`	`card-group + card`
With footers	Footers line up across the group.`card-group + card-footer`	`card-group + card-footer`
Separate equal-height cards	Same heights with gutters between the cards.`row row-cols-1 row-cols-md-3 g-4 + card h-100`	`row row-cols-1 row-cols-md-3 g-4 + card h-100`

Code example

HTML

<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

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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 .card-footer element rather than at the end of .card-body 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, .card-group renders cards side-by-side from the sm breakpoint (576px) upward and stacks them vertically below it. If you need control over when stacking occurs, switch to .card-group inside a .row 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 :not(:first-child) selector. If you need a visible divider between specific cards, add a custom border-start utility class directly on the card you want bordered.

Limit groups to 2 to 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 .row with row-cols-* classes and individual cards with h-100 instead.

FAQ

How does Card Group achieve equal-height cards without JavaScript?

Bootstrap 5 applies display: flex to the .card-group wrapper and each card inside it is a flex child set to flex: 1 0 0%. This means all cards stretch to the height of the tallest card in the group. Within each card, .card-body has flex: 1 1 auto so it expands to fill the remaining space, pushing the .card-footer to the bottom consistently.

Can I add background colours or borders to individual cards inside a Card Group?

Yes. Bootstrap's contextual colour utilities work normally inside a group. Add bg-primary text-white, border-success, or any bg-* class directly to the individual .card element. To highlight a featured plan, for example, you might add bg-dark text-white border-0 to the middle card while leaving the others as default. Just be aware that shared border removal between adjacent cards is handled by CSS selectors, so a custom border colour on one card may visually override the joined-border effect.

How does Canvas Builder generate a Card Group component?

When you describe a card group in Canvas Builder (for example, 'three pricing tiers side by side') it generates the full .card-group HTML with realistic copy, card footers, and CTA buttons already wired up with your brand's primary and secondary colour tokens. It respects Bootstrap 5's responsive stacking behaviour out of the box and won't add custom JavaScript for something Bootstrap handles natively in CSS.