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.