0
0
Bootsrapmarkup~5 mins

Card groups and decks in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.