BootstrapHow-ToBeginner · 3 min read

How to Create Card Group in Bootstrap: Simple Guide

To create a card group in Bootstrap, wrap multiple card components inside a container with the class card-group. This groups cards together with equal height and aligned borders automatically.

📐

Syntax

The basic syntax for a Bootstrap card group uses a container with the card-group class. Inside it, place multiple card elements. Each card can have an image, body, title, text, and footer.

card-group: Container that groups cards with equal height and aligned borders.
card: Individual card element.
card-body: Section inside a card for content like title and text.

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card content here.</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card content here.</p>
    </div>
  </div>
</div>

💻

Example

This example shows a card group with three cards. Each card has an image, a title, and some text. The cards are displayed side by side with equal height and aligned borders.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Group 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="card-group">
      <div class="card">
        <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's content.</p>
        </div>
      </div>
      <div class="card">
        <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's content.</p>
        </div>
      </div>
      <div class="card">
        <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's content.</p>
        </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

Three cards displayed side by side with equal height and aligned borders, each showing an image, a title, and text.

⚠️

Common Pitfalls

Common mistakes when creating card groups include:

Not wrapping cards inside a card-group container, which breaks the layout.
Using different card heights or content lengths without card-group, causing uneven cards.
Forgetting to include Bootstrap CSS, so styles don't apply.

Also, card-group does not stack cards vertically on small screens by default, so consider using row and col classes for responsive layouts.

html

<!-- Wrong: Cards not inside card-group -->
<div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Right: Cards inside card-group -->
<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

📊

Quick Reference

Use card-group to group cards with equal height and aligned borders.
Place multiple card elements inside the card-group container.
Include Bootstrap CSS for styles to work.
For responsive stacking, combine with grid classes like row and col.

✅

Key Takeaways

Wrap multiple cards inside a container with class card-group to create a card group.

Cards in a card group have equal height and aligned borders automatically.

Always include Bootstrap CSS for card styles to apply correctly.

For responsive layouts, combine card-group with Bootstrap grid classes.

Avoid placing cards outside card-group to prevent layout issues.