What’s the simplest way to build a masonry-like card layout in Bootstrap 5?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

What’s the simplest way to build a masonry-like card layout in Bootstrap 5?

Asked on May 25, 2025

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

What’s the simplest way to build a masonry-like card layout in Bootstrap 5?

Asked on May 25, 2025

Answer

The Q&A Network