BootstrapHow-ToBeginner · 4 min read

How to Use Card Deck in Bootstrap: Simple Guide

In Bootstrap 5, use the row and col classes to create a card deck layout by placing multiple card components inside columns. Bootstrap 5 removed the card-deck class from earlier versions, so use grid utilities for responsive card groups instead.

📐

Syntax

Bootstrap 5 does not have a card-deck class like Bootstrap 4. Instead, use the grid system with row and col classes to arrange cards in a deck layout.

row: Container for horizontal grouping of columns.
col: Defines columns that hold individual cards.
card: The card component itself.

html

<div class="row">
  <div class="col">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
  <div class="col">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
  <div class="col">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
</div>

Output

Three cards arranged side by side in equal-width columns forming a card deck.

💻

Example

This example shows three cards arranged side by side using Bootstrap 5 grid classes to create a card deck effect. Each card has an image, title, text, and a button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Deck Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 1">
          <div class="card-body">
            <h5 class="card-title">Card One</h5>
            <p class="card-text">This is the first card in the deck.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 2">
          <div class="card-body">
            <h5 class="card-title">Card Two</h5>
            <p class="card-text">This is the second card in the deck.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 3">
          <div class="card-body">
            <h5 class="card-title">Card Three</h5>
            <p class="card-text">This is the third card in the deck.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A responsive layout showing three cards side by side on medium and larger screens, stacked on smaller screens, each with an image, title, text, and button.

⚠️

Common Pitfalls

Many developers try to use the card-deck class from Bootstrap 4 in Bootstrap 5, but it was removed. This causes cards to stack vertically instead of forming a deck.

Also, forgetting to use the grid row and col classes leads to cards not aligning properly.

html

<!-- Wrong: Using card-deck class in Bootstrap 5 (no effect) -->
<div class="card-deck">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Right: Use grid classes -->
<div class="row">
  <div class="col">
    <div class="card">...</div>
  </div>
  <div class="col">
    <div class="card">...</div>
  </div>
  <div class="col">
    <div class="card">...</div>
  </div>
</div>

Output

The first block does not arrange cards side by side; the second block correctly arranges cards in columns forming a deck.

📊

Quick Reference

Use Bootstrap 5 grid system to create card decks:

Wrap cards in a row container.
Place each card inside a col for equal width.
Use responsive column classes like row-cols-1 row-cols-md-3 for automatic stacking on small screens.
Add h-100 to cards for equal height.

✅

Key Takeaways

Bootstrap 5 removed the card-deck class; use grid classes instead.

Wrap cards in a row and place each card inside a col for side-by-side layout.

Use responsive column classes to make card decks adapt to screen size.

Add h-100 class to cards to keep them the same height in a deck.

Avoid using deprecated Bootstrap 4 classes to ensure proper layout.