Bootstrap 5 Responsive Image Gallery Example

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

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

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
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack