Card groups and decks in Bootsrap

Introduction

Card groups and decks help you show multiple cards together in a neat, organized way. They make your webpage look clean and balanced.

When you want to display a set of related items like product features or team members.

When you want cards to have the same height and line up nicely.

When you want a responsive layout that adjusts on different screen sizes.

When you want to create a gallery of cards with equal spacing.

When you want to group cards so they look like a single block.

Syntax

Bootsrap

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

<div class="d-flex justify-content-between">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

.card-group makes cards share the same height and appear connected.

Use d-flex and spacing utilities instead of .card-deck in Bootstrap 5 to space cards evenly with margin between them.

Examples

This card-group makes both cards the same height and places them side by side without space between.

Bootsrap

<div class="card-group">
  <div class="card">
    <img src="image1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Some text.</p>
    </div>
  </div>
  <div class="card">
    <img src="image2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Some text.</p>
    </div>
  </div>
</div>

This flex container spaces cards evenly with margin between them, making them look separate but balanced.

Bootsrap

<div class="d-flex justify-content-between">
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card A</h5>
      <p class="card-text">Text A.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card B</h5>
      <p class="card-text">Text B.</p>
    </div>
  </div>
</div>

Sample Program

This example shows two sections: a card group where cards share the same height and appear connected, and a flex container used instead of card deck where cards have space between them for a balanced look.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Group and Deck Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container my-4">
    <h2>Card Group Example</h2>
    <div class="card-group">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder Image">
        <div class="card-body">
          <h5 class="card-title">Card One</h5>
          <p class="card-text">This is the first card in a card group.</p>
        </div>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder Image">
        <div class="card-body">
          <h5 class="card-title">Card Two</h5>
          <p class="card-text">This card shares the same height as the first.</p>
        </div>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder Image">
        <div class="card-body">
          <h5 class="card-title">Card Three</h5>
          <p class="card-text">All cards line up nicely in a group.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-5">Card Deck Example</h2>
    <div class="d-flex justify-content-between">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Deck Card One</h5>
          <p class="card-text">Cards in a deck have space between them.</p>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Deck Card Two</h5>
          <p class="card-text">They look balanced but separate.</p>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Deck Card Three</h5>
          <p class="card-text">Good for showing distinct items.</p>
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Bootstrap 5 removed .card-deck class; use d-flex and spacing utilities instead for decks.

Always add alt text to images for accessibility.

Use container classes like .container to keep content centered and responsive.

Summary

Card groups make cards the same height and connect them visually.

Card decks space cards evenly with margin for a balanced look.

Use these to organize multiple cards neatly on your webpage.

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