How do I make a responsive image gallery using Bootstrap 5 grid and cards?

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

Post this Question & Answer:

How do I make a responsive image gallery using Bootstrap 5 grid and cards?

Asked on May 02, 2025

Answer

To create a responsive image gallery using Bootstrap 5, you can utilize the grid system and card components. This approach ensures your gallery is both visually appealing and adapts to different screen sizes.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <img src="image1.jpg" class="card-img-top" alt="Image 1">
                        <div class="card-body">
                            <h5 class="card-title">Image 1</h5>
                            <p class="card-text">Description for Image 1.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <img src="image2.jpg" class="card-img-top" alt="Image 2">
                        <div class="card-body">
                            <h5 class="card-title">Image 2</h5>
                            <p class="card-text">Description for Image 2.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <img src="image3.jpg" class="card-img-top" alt="Image 3">
                        <div class="card-body">
                            <h5 class="card-title">Image 3</h5>
                            <p class="card-text">Description for Image 3.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `.container` class centers the content and provides padding.
The `.row` class creates a horizontal group of columns.
Each `.col-md-4` class specifies that the column should take up 4 out of 12 grid columns on medium and larger screens.
The `.card` component is used to display images with optional titles and descriptions.
Adjust the number of columns or add more `.col-md-4` divs to include more images.

✅ Answered with Bootstrap 5 best practices.

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

How do I make a responsive image gallery using Bootstrap 5 grid and cards?

Asked on May 02, 2025

Answer

The Q&A Network