How do I make a responsive image gallery using Bootstrap 5 grid and cards?
Asked on Jun 01, 2025
1 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:
✅ Answered with Bootstrap 5 best practices.- 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.