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.

Practice

1. What is the main purpose of using .card-group in Bootstrap?

easy

A. To add shadows to cards

B. To add space between cards with equal margins

C. To create a carousel of cards

D. To make all cards the same height and visually connected

Solution

1. Step 1: Understand .card-group behavior

   The .card-group class groups cards so they share the same height and appear connected without gaps.

2. Step 2: Compare with other classes

   .card-deck spaces cards evenly with margins, not connecting them tightly.

3. Final Answer:

   To make all cards the same height and visually connected -> Option D

4. Quick Check:

   .card-group = same height + connected cards [OK]

Hint: Remember: group = connected and equal height cards [OK]

Common Mistakes:

• Confusing card-group with card-deck spacing
• Thinking card-group adds margins between cards
• Assuming card-group creates a carousel

2. Which of the following is the correct syntax to create a card deck in Bootstrap?

easy

A. <div class='card-group'> ... </div>

B. <div class='deck-cards'> ... </div>

C. <div class='card-deck'> ... </div>

D. <div class='card-container'> ... </div>

Solution

1. Step 1: Identify Bootstrap class for card decks

   The correct Bootstrap class for card decks is card-deck, which spaces cards evenly.

2. Step 2: Check other options

   card-group is for connected cards, and the other classes are not valid Bootstrap classes.

3. Final Answer:

   <div class='card-deck'> ... </div> -> Option C

4. Quick Check:

   Card deck syntax = card-deck [OK]

Hint: Deck = spaced cards, use class 'card-deck' [OK]

Common Mistakes:

• Using 'card-group' instead of 'card-deck' for spacing
• Inventing non-existent classes like 'card-container'
• Misspelling class names

3. What will be the visual difference when using .card-group versus .card-deck for three cards side by side?

medium

A. Both have equal height and no gaps

B. Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing

C. Cards in .card-group have gaps; .card-deck cards overlap

D. Both have gaps but different background colors

Solution

1. Step 1: Understand .card-group layout

   .card-group makes cards the same height and connects them visually without gaps.

2. Step 2: Understand .card-deck layout

   .card-deck spaces cards evenly with margins, creating gaps between cards.

3. Final Answer:

   Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing -> Option B

4. Quick Check:

   Group = connected; Deck = spaced [OK]

Hint: Group = no gaps; Deck = gaps between cards [OK]

Common Mistakes:

• Thinking card-deck removes gaps
• Assuming both have same spacing
• Confusing card-group with card-deck visually

4. You wrote this code but cards are not spaced evenly:

<div class='card-group'>
  <div class='card'>Card 1</div>
  <div class='card'>Card 2</div>
  <div class='card'>Card 3</div>
</div>

What is the issue?

medium

A. You should use card-deck instead of card-group for even spacing

B. You need to add row class to the container

C. Cards need col classes inside card-group

D. You forgot to add container class

Solution

1. Step 1: Identify the class used

   The code uses card-group, which connects cards without spacing.

2. Step 2: Choose correct class for spacing

   To space cards evenly with margins, card-deck should be used instead.

3. Final Answer:

   You should use card-deck instead of card-group for even spacing -> Option A

4. Quick Check:

   Spacing needs card-deck not card-group [OK]

Hint: Use card-deck for spacing, card-group for connected cards [OK]

Common Mistakes:

• Adding row or col classes unnecessarily
• Thinking container class controls card spacing
• Confusing card-group and card-deck roles

5. You want to display four cards in a row that all have the same height and are spaced evenly with margin between them. Which Bootstrap approach should you use?

hard

A. Use .card-deck to space cards evenly with margin and equal height

B. Use .card-group inside a .row with .col classes

C. Use .card-group alone without any grid classes

D. Use .card-columns for equal height and spacing

Solution

1. Step 1: Understand requirements

   You want cards with equal height and even spacing with margin between them.

2. Step 2: Match Bootstrap classes to needs

   .card-deck spaces cards evenly with margin and keeps them balanced in height.

3. Step 3: Evaluate other options

   .card-group connects cards without margin; .card-columns creates masonry layout, not equal height rows.

4. Final Answer:

   Use .card-deck to space cards evenly with margin and equal height -> Option A

5. Quick Check:

   Even spacing + equal height = card-deck [OK]

Hint: For spacing and equal height, pick card-deck [OK]

Common Mistakes:

• Using card-group expecting margin spacing
• Using card-columns which stacks cards unevenly
• Not combining with grid classes properly