What’s the simplest way to build a masonry-like card layout in Bootstrap 5?
Asked on Jun 10, 2025
1 Answer
To create a masonry-like card layout in Bootstrap 5, you can use the `card` component along with the `row-cols` utility classes to achieve a responsive grid layout.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<img src="image1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="image3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
</div>
</div>
<!-- Add more cards as needed -->
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `row-cols-1`, `row-cols-sm-2`, and `row-cols-md-3` classes create a responsive grid with different column counts at various breakpoints.
- The `g-3` class adds a gap between the cards.
- You can adjust the number of columns and gaps by changing the utility classes.
- Ensure images have appropriate alt text for accessibility.