Card groups and decks in Bootsrap - Browser Rendering Trace

Render Flow - Card groups and decks

Load HTML with card elements

↓

Apply Bootstrap CSS classes

↓

Card group container sets flex display

↓

Cards become flex items

↓

Cards align side-by-side with equal height

↓

Browser paints cards with borders and spacing

The browser reads the HTML cards, applies Bootstrap's card group or deck classes which use flexbox to arrange cards side-by-side with equal height, then paints the styled cards on screen.

Render Steps - 4 Steps

Code Added:<div class="card-group"> container added

Before

[Card 1]

[Card 2]

→

After

[Card 1]_[Card 2]

Adding the card-group container applies flex layout, placing cards side-by-side horizontally.

🔧 Browser Action:Creates flex formatting context, triggers reflow

Code Sample

Two cards arranged side-by-side with equal height and consistent spacing inside a card group container.

Bootsrap

<div class="card-group">
  <div class="card">
    <img src="img1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Text for card one.</p>
    </div>
  </div>
  <div class="card">
    <img src="img2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Text for card two.</p>
    </div>
  </div>
</div>

Bootsrap

.card-group {
  display: flex;
  flex-wrap: nowrap;
}
.card {
  flex: 1 1 0%;
  margin-right: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}
.card:last-child {
  margin-right: 0;
}

Render Quiz - 3 Questions

After applying step 2, how are the cards arranged visually?

A Stacked vertically

B Side-by-side with equal height

C Overlapping each other

D Hidden from view

Common Confusions - 3 Topics

Why do my cards stack vertically instead of side-by-side?

Without the card-group container or display:flex, cards behave like block elements stacking vertically. See render_step 1 and 2 where flex layout is applied to arrange cards horizontally.

💡 Use a flex container (card-group) to place cards side-by-side.

Why do my cards have different heights?

Flexbox aligns items by default to stretch their height equally. If card content differs greatly, ensure all cards are inside a flex container as in render_step 2 to get equal heights.

💡 Flex container makes card heights match automatically.

Why is there no space between my cards?

Bootstrap adds margin-right on cards except the last one to create spacing (render_step 3). Without margin, cards touch each other.

💡 Add margin between flex items for spacing.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	main axis: row	Arranges cards side-by-side	Card groups layout
flex-wrap	nowrap	row	Prevents cards from wrapping to next line	Keep cards in one row
flex	1 1 0%	row	Cards grow equally to fill space	Equal width cards
margin-right	0.75rem	row	Adds spacing between cards	Visual separation
border	1px solid #ddd	N/A	Adds visible card borders	Card styling
border-radius	0.25rem	N/A	Rounds card corners	Visual polish

Concept Snapshot

Bootstrap card groups use display:flex to arrange cards side-by-side. Cards inside grow equally with flex:1 1 0% for equal widths. Margin-right adds spacing between cards except the last. Borders and border-radius style cards visually. Without card-group, cards stack vertically by default.

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