How to create card grid in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Card Grid in Bootstrap: Simple Guide

To create a card grid in Bootstrap, use the row class to make a grid container and place multiple col classes inside it, each holding a card. Bootstrap's grid system automatically arranges cards in rows and columns that adjust on different screen sizes.

📐

Syntax

Use a div with class row to start the grid. Inside, add div elements with classes like col-md-4 to define columns. Each column holds a card component with card-body for content.

This structure creates a responsive grid where cards align in rows and columns.

html

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        Card content here
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        Card content here
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        Card content here
      </div>
    </div>
  </div>
</div>

Output

Three cards arranged side by side in a row on medium and larger screens, stacked on smaller screens.

💻

Example

This example shows a responsive card grid with three cards per row on medium screens and above, and stacked cards on smaller screens. Each card has a title and text.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Grid 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 g-3">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">This is the first card.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">This is the second card.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">This is the third card.</p>
          </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 webpage showing three cards side by side on medium+ screens, stacked vertically on small screens, each card with a title and text inside a white box with shadow.

⚠️

Common Pitfalls

Not wrapping cards inside row and col classes causes layout issues.
Using fixed widths instead of Bootstrap grid classes breaks responsiveness.
Forgetting to include Bootstrap CSS link results in unstyled cards.
Not adding spacing classes like g-3 or margins can make cards stick together.

html

<!-- Wrong: Cards not inside grid columns -->
<div class="card">
  <div class="card-body">Card without grid</div>
</div>
<div class="card">
  <div class="card-body">Another card without grid</div>
</div>

<!-- Right: Cards inside grid columns -->
<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Proper card in grid</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Another proper card</div>
    </div>
  </div>
</div>

Output

Wrong example shows cards stacked without spacing or alignment; right example shows cards aligned in columns with spacing.

📊

Quick Reference

Use these Bootstrap classes to create card grids:

row: container for grid rows
col-{breakpoint}-{number}: defines column width and responsiveness
card: main card container
card-body: content area inside card
g-*: gap between grid items

Example: row g-3 for grid with spacing, col-md-4 for 3 columns on medium+ screens.

✅

Key Takeaways

Wrap cards inside Bootstrap grid row and col classes for proper layout.

Use responsive column classes like col-md-4 to control how many cards appear per row on different screens.

Add spacing classes like g-3 on the row to keep cards visually separated.

Always include Bootstrap CSS to get the card styles and grid system working.

Test your card grid on different screen sizes to ensure responsiveness.