Card groups and decks in Bootsrap - Deep Dive

Overview - Card groups and decks

What is it?

Card groups and decks are Bootstrap components that help organize multiple cards in a neat, consistent layout. Cards are flexible containers for content like text, images, and links. Groups and decks arrange these cards side by side with equal height and spacing, making the page look balanced and easy to read.

Why it matters

Without card groups or decks, cards placed side by side can look uneven or messy because their heights and spacing might differ. This makes the page feel cluttered and harder to scan. Using these components ensures a clean, professional look that improves user experience and readability.

Where it fits

Before learning card groups and decks, you should understand basic Bootstrap cards and the grid system. After mastering groups and decks, you can explore responsive layouts, card utilities, and advanced Bootstrap components like carousels or modals.

Mental Model

Core Idea

Card groups and decks arrange multiple cards side by side with consistent height and spacing to create balanced, visually appealing layouts.

Think of it like...

Imagine placing several picture frames on a wall. Card groups are like hanging frames so their tops align perfectly, while card decks are like placing frames on a shelf with equal space between them.

┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│   Card 1    │ │   Card 2    │ │   Card 3    │
│  (equal     │ │  (equal     │ │  (equal     │
│   height)   │ │   height)   │ │   height)   │
└─────────────┘ └─────────────┘ └─────────────┘

Card Group: Cards share the same height and are tightly aligned.

┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   Card 1    │   │   Card 2    │   │   Card 3    │
│  (equal     │   │  (equal     │   │  (equal     │
│   height)   │   │   height)   │   │   height)   │
└─────────────┘   └─────────────┘   └─────────────┘

Card Deck: Cards have equal height with space between them.

Build-Up - 7 Steps

1

Foundation

Understanding Bootstrap Cards Basics

Concept: Learn what a Bootstrap card is and how to create a simple card.

A Bootstrap card is a flexible container for content like text, images, and buttons. You create a card by using the class 'card' on a div. Inside, you can add 'card-body' for text and other elements. Example:

Card title

Some example text.

Go somewhere

Result

A single card appears with an image, title, text, and button styled by Bootstrap.

Understanding the basic card structure is essential before arranging multiple cards together.

2

Foundation

Placing Multiple Cards Side by Side

Concept: Learn how to put several cards next to each other using Bootstrap's grid or flex utilities.

To show cards side by side, you can use Bootstrap's grid system or flexbox classes. For example, placing cards inside a 'row' with 'col' classes or using 'd-flex' on a container to align cards horizontally. Example with flex:

...

...

...

Result

Multiple cards appear side by side but may have uneven heights and spacing.

Simply placing cards side by side can cause uneven heights and inconsistent spacing, which looks unprofessional.

3

Intermediate

Using Card Groups for Equal Height

🤔Before reading on: do you think card groups automatically add space between cards or just align their heights? Commit to your answer.

Concept: Card groups make all cards inside have the same height and align their tops and bottoms tightly without extra spacing.

Wrap your cards inside a container with the class 'card-group'. This makes all cards inside share the same height, matching the tallest card. Cards will be placed side by side with no space between them. Example:

...

...

...

Result

Cards appear side by side with equal height and no gaps between them.

Knowing that card groups align cards tightly helps you create compact layouts where cards look like a single block.

4

Intermediate

Using Card Decks for Spaced Layouts

🤔Before reading on: do you think card decks keep cards tightly together or add space between them? Commit to your answer.

Concept: Card decks arrange cards side by side with equal height but add space between each card for breathing room.

Wrap cards inside a container with the class 'card-deck'. This makes cards have equal height and adds consistent spacing between them. Example:

...

...

...

Result

Cards appear side by side with equal height and space between each card.

Understanding card decks helps you create balanced layouts that feel open and easy to scan.

5

Intermediate

Responsive Behavior of Card Groups and Decks

Concept: Learn how card groups and decks behave on different screen sizes and how to control wrapping.

By default, card groups and decks try to keep cards in one row. On small screens, cards may shrink or overflow. You can use Bootstrap's responsive utilities or grid system to control wrapping. Example:

...

...

...

Use media queries or grid columns to stack cards on small screens.

Result

Cards adjust layout on different screen sizes, improving usability on phones and tablets.

Knowing responsive behavior prevents layout breakage and ensures good user experience on all devices.

6

Advanced

Customizing Card Groups and Decks with CSS

🤔Before reading on: do you think you can change spacing inside card groups easily with CSS, or is it fixed by Bootstrap? Commit to your answer.

Concept: Learn how to override Bootstrap styles to customize spacing, borders, or shadows in card groups and decks.

Bootstrap sets specific margins and flex properties on card groups and decks. You can override these using custom CSS selectors. Example: .card-group > .card { margin-right: 1rem; /* add space between cards */ } .card-deck { gap: 2rem; /* modern way to add space */ } Be careful to maintain equal heights and alignment.

Result

Cards in groups or decks have customized spacing or styles while keeping layout intact.

Knowing how to customize Bootstrap components lets you adapt designs to your brand or project needs.

7

Expert

Limitations and Future of Card Groups and Decks

🤔Before reading on: do you think card decks are the best choice for all card layouts, or are there better modern alternatives? Commit to your answer.

Concept: Understand the limitations of card groups and decks and explore modern alternatives like CSS Grid or Bootstrap's newer utilities.

Card groups and decks rely on flexbox with some fixed behaviors. They can be inflexible for complex layouts or dynamic content. Bootstrap 5 encourages using grid or flex utilities directly for more control. Example alternative:

...

...

This approach offers better responsiveness and spacing control.

Result

You can create more flexible, responsive card layouts beyond card groups and decks.

Knowing the limits of card groups and decks helps you choose the best layout method for your project.

Under the Hood

Card groups and decks use CSS flexbox to arrange cards horizontally. Card groups set cards to share the same height by stretching them to match the tallest card, removing gaps between cards. Card decks also use flexbox but add margins or gaps between cards to create space. Bootstrap applies specific CSS classes that control flex properties, margins, and height alignment to achieve these effects.

Why designed this way?

Bootstrap created card groups and decks to solve common layout problems with cards: uneven heights and inconsistent spacing. Flexbox was chosen because it naturally aligns items and can stretch them to equal heights. Card groups provide a compact look, while decks offer breathing space. Alternatives like CSS Grid were less supported when these components were introduced, so flexbox was the best balance of compatibility and power.

┌───────────────────────────────┐
│        Card Container          │
│  ┌─────────┐ ┌─────────┐       │
│  │  Card 1 │ │  Card 2 │  ...  │
│  └─────────┘ └─────────┘       │
│  Flexbox arranges cards in row │
│  Card Group: cards stretch to  │
│  tallest height, no gaps       │
│  Card Deck: cards stretch,     │
│  with gaps between them        │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do card groups add space between cards by default? Commit to yes or no.

Common Belief: Card groups add space between cards to separate them visually.

Reality: Card groups remove space between cards, making them tightly aligned with equal height.

Why it matters: Assuming card groups add space can lead to unexpected tight layouts that look cramped.

Quick: Are card decks deprecated in Bootstrap 5? Commit to yes or no.

Common Belief: Card decks are the recommended way to space cards in all Bootstrap versions.

Reality: Bootstrap 5 has deprecated card decks in favor of grid and flex utilities for better flexibility.

Why it matters: Using card decks in new projects may cause maintenance issues and limit responsive design options.

Quick: Do card groups automatically make cards responsive on small screens? Commit to yes or no.

Common Belief: Card groups automatically stack cards vertically on small screens for responsiveness.

Reality: Card groups keep cards in one row and do not stack automatically; you must add responsive classes.

Why it matters: Not adding responsive controls can cause horizontal scrolling or squished cards on small devices.

Quick: Does using card groups guarantee all cards have the same content height? Commit to yes or no.

Common Belief: Card groups make all cards exactly the same height regardless of content.

Reality: Card groups match the tallest card's height, but content inside can still overflow or look uneven if not managed.

Why it matters: Ignoring content differences can cause layout breakage or hidden overflow inside cards.

Expert Zone

1

Card groups rely on flexbox's 'align-items: stretch' to equalize card heights, but nested elements inside cards can affect final height if not styled properly.

2

Card decks use margins or gaps that can collapse or behave unexpectedly with nested flex containers, requiring careful CSS overrides in complex layouts.

3

Bootstrap 5's move away from card decks encourages using grid utilities with 'row-cols' and 'gutter' classes for more precise control over card layouts and responsiveness.

When NOT to use

Avoid card groups and decks when you need highly customized or complex card layouts, such as uneven card sizes or dynamic content heights. Instead, use CSS Grid or Bootstrap's responsive grid system with 'row-cols' and 'g-4' classes for flexible, responsive card arrangements.

Production Patterns

In real projects, developers often use Bootstrap's grid system with 'row-cols' to create responsive card layouts instead of card decks. Card groups are used when a compact, tight card block is needed, such as in dashboards. Custom CSS is frequently added to tweak spacing and alignment beyond Bootstrap defaults.

Connections

CSS Flexbox

Card groups and decks are built on flexbox principles for layout.

Understanding flexbox helps you grasp how cards align, stretch, and space themselves inside groups and decks.

Responsive Web Design

Card groups and decks must adapt to different screen sizes for usability.

Knowing responsive design principles helps you control how cards stack or resize on phones and tablets.

Interior Design Layouts

Arranging cards is like arranging furniture or pictures to balance space and alignment.

This connection shows how visual balance and spacing principles apply both in web layouts and physical spaces.

Common Pitfalls

#1 Cards in a group have uneven heights causing a messy look.

Wrong approach:

...
...
...

Correct approach:

...
...
...

Root cause:

Using a generic flex container without Bootstrap's card-group class does not equalize card heights.

#2 Cards overflow horizontally on small screens causing scrollbars.

Wrong approach:

...
...
...

Correct approach:

...

...

...

Root cause:

Card groups do not stack cards on small screens by default; responsive grid classes are needed.

#3 Trying to add space between cards inside a card group using margin on cards.

Wrong approach:

.card-group > .card {
margin-right: 1rem;
}

Correct approach:

Use card decks or grid gutters instead of adding margins inside card groups.

Root cause:

Card groups remove gaps by design; adding margins breaks the layout and causes overflow.

Key Takeaways

Bootstrap card groups and decks help arrange multiple cards side by side with equal heights for a neat layout.

Card groups tightly align cards with no space between, while card decks add space for breathing room.

Both rely on CSS flexbox to control card height and alignment but behave differently in spacing.

Responsive design requires additional Bootstrap grid classes to stack or resize cards on small screens.

Bootstrap 5 favors grid utilities over card decks for flexible, modern card layouts.

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