Card groups and decks in Bootsrap - Performance & Optimization

Performance: Card groups and decks

MEDIUM IMPACT

This concept affects page load speed and rendering performance by how multiple card components are grouped and laid out, impacting layout calculations and paint times.

Displaying multiple cards with consistent height and spacing

Bootsrap

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
</div>

Using Bootstrap grid with fixed height cards (h-100) avoids layout thrashing by letting the grid handle consistent sizing and spacing.

📈 Performance GainSingle layout pass with minimal reflows and faster LCP

Displaying multiple cards with consistent height and spacing

Bootsrap

<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Card groups use flexbox but can cause layout thrashing if cards have varying content heights, triggering multiple reflows.

📉 Performance CostTriggers multiple reflows as browser recalculates heights for each card

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Bootstrap card-group with variable content	Moderate DOM nodes	Multiple reflows due to height adjustments	Medium paint cost	[X] Bad
Bootstrap grid with h-100 cards	Moderate DOM nodes	Single reflow with fixed heights	Low paint cost	[OK] Good
Bootstrap card-deck (deprecated)	Moderate DOM nodes	Reflows on resize causing CLS	Medium paint cost	[X] Bad
Flex utilities with gap and flex-fill	Moderate DOM nodes	Minimal reflows, stable layout	Low paint cost	[OK] Good

Rendering Pipeline

Card groups and decks affect the Style Calculation and Layout stages because the browser must compute sizes and positions for multiple cards, especially when heights vary. Paint and Composite stages follow but are less impacted.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout is most expensive due to height and width calculations for multiple cards

Core Web Vital Affected

LCP

This concept affects page load speed and rendering performance by how multiple card components are grouped and laid out, impacting layout calculations and paint times.

Optimization Tips

1Use fixed heights or consistent sizing to avoid multiple reflows in card groups.

2Avoid deprecated card-deck; prefer flex utilities with gap and flex-fill for stable layouts.

3Check layout recalculations in DevTools Performance panel to optimize card rendering.

Performance Quiz - 3 Questions

Which Bootstrap pattern reduces layout thrashing when displaying multiple cards?

A Using grid with fixed height cards (h-100)

B Using card-group with variable content heights

C Using card-deck without flex utilities

D Using nested cards inside card-group

DevTools: Performance

How to check: Open DevTools > Performance tab, record while loading the page with cards, then analyze Layout and Recalculate Style events.

What to look for: Look for multiple Layout events triggered by card height recalculations and long tasks delaying LCP.