Bootstrap 5 Responsive Image Gallery Example

In this tutorial, we will create photo gallery, responsive image gallery, gallery with different row and cols example with bootstrap 5.



Example 1

4 columns responsive image gallery

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 Responsive Image Gallery Example</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>
        <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>
    </body>
</html>



Example 2

3 columns responsive image gallery with rows style using eg. .row-cols-1 .row-cols-sm-2 .row-cols-md-3

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 Responsive Image Gallery Example</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>
        <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>
    </body>

</html>



Example 3

Nested responsive image gallery

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 Responsive Image Gallery Example</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>
        <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>
    </body>

</html>