In this tutorial, we’ll create a photo gallery, showcasing responsive image displays and examples of galleries with different row and column configurations using Bootstrap 5.
Example 1
4 columns responsive image gallery.
<div class="container">
<div class="row">
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190727/1500x900" class="img-fluid" alt="image">
</div>
</div>
</div>
![responsive image gallery](https://larainfo.com/wp-content/uploads/2024/05/aX6RK8R3hJ5KfQcBUL4vAqvGIw9kZ3FccgwzRULD-1024x303.png)
Example 2
3 columns responsive image gallery with rows style using eg. .row-cols-1 .row-cols-sm-2 .row-cols-md-3.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
<div class="col mt-3">
<img src="https://source.unsplash.com/collection/190728/1500x900" class="img-fluid" alt="image">
</div>
</div>
</div>
![3 columns responsive image](https://larainfo.com/wp-content/uploads/2024/05/aa4TrxD6dVT0zqsPTWYC9kVevJ0EzV3KD6Hk9SVh-1024x623.png)
Example 3
Nested responsive image gallery.
<div class="container">
<div class="row">
<div class="col-md-4 mt-3 col-lg-4">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-4">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-4">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-6">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-6">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
<div class="col-md-4 mt-3 col-lg-3">
<img src="https://source.unsplash.com/collection/190726/1500x900" class="img-fluid" alt="image">
</div>
</div>
</div>
![Nested responsive image gallery](https://larainfo.com/wp-content/uploads/2024/05/Q9IyPgXG6N4MUXzah3Cm5hE6Cyve84eyrkq3YC3L-1024x672.png)