How to create a grid of cards in Bootstrap?

To create a card grid in Bootstrap, you need to use its responsive grid system to combine the card components. 1. Use container, row and col-* class layouts to place the card into the column to achieve responsive arrangement; 2. Control the number of cards per row under different screens by adjusting col-12, col-md-6, col-lg-4, col-xl-3 and other classes; 3. To make the cards highly consistent, you can add h-100 on the card class; 4. It is recommended to use gap classes such as g-4 instead of mb-4 to set the spacing on the row, so as to build a neat and adaptive card grid layout.

Creating a grid of cards in Bootstrap is straightforward using its responsive grid system ( row , col ) combined with the card component. Here's how to do it properly in modern Bootstrap (v5 ).

1. Use Bootstrap's Grid with Card Components

Bootstrap's grid relies on container , row , and col-* classes. Cards should be placed inside columns to ensure proper spacing and responsiveness.

 <div class="container">
  <div class="row">
    <div class="col-md-4 mb-4">
      <div class="card">
        <img class="card-img-top lazy"  src="/static/imghw/default1.png"  data-src="image1.jpg"  alt="How to create a grid of cards in Bootstrap?">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Some quick example text.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <img class="card-img-top lazy"  src="/static/imghw/default1.png"  data-src="image2.jpg"  alt="How to create a grid of cards in Bootstrap?">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Some quick example text.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card">
        <img class="card-img-top lazy"  src="/static/imghw/default1.png"  data-src="image3.jpg"  alt="How to create a grid of cards in Bootstrap?">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">Some quick example text.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

✅ This creates a responsive 3-column layout on medium screens and above. On smaller screens, cards stack vertically.

2. Control Responsive Behavior

Adjust the col-* classes to change how many cards appear per row at different breakpoints:

• col-12 : 1 card per row (mobile)
• col-md-6 : 2 per row on medium
• col-lg-4 : 3 per row on large
• col-xl-3 : 4 per row on extra large

Example for 4 cards per row on large screens:

 <div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card</h5>
        <p class="card-text">Content here.</p>
      </div>
    </div>
  </div>
  <!-- Repeat for other cards -->
</div>

This gives you a flexible, responsive card grid.

3. Equal Height Cards (Optional)

If cards have different content lengths, their heights may vary. Use h-100 to make them stretch to full column height:

 <div class="col-md-4 mb-4">
  <div class="card h-100">
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This card will match the height of the tallest in the row.</p>
    </div>
  </div>
</div>

Add h-100 to all cards in the same row for uniform height.

4. Add Gaps Between Cards (Modern Approach)

Use Bootstrap's g-* (gap) utilities instead of manual margins:

 <div class="row g-4">
  <div class="col-md-4">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
  <!-- More cards -->
</div>

This automatically adds spacing between columns and rows without needing mb-4 .

Key Tips:

• Always wrap cards in col classes.
• Use mb-4 or g-3/g-4 for spacing.
• Use h-100 for equal height.
• Choose col-* sizes based on how many cards per row you want at each screen size.

Basically, it's just Bootstrap's grid doing the layout — cards go inside columns. Doesn't get much simpler than that.

The above is the detailed content of How to create a grid of cards in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!