Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap Gallery

Bootstrap gallery is a great UI element perfect for introducing vistors to a number of images, videos or other media files.

Easy to construct in a form of a lightbox gallery, multi item carousel or slides with caption.

Examples of Bootstrap gallery use:

  • Most popular paintings on a museum website
  • Landscape photos in traveling blog
  • Best pieces of work in a portfolio

All of the above can be easily created by following those examples:


Gallery with image filtering MDB Pro component

                
.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%; }
  .gallery .pics {
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease; }
  .gallery .animation {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
                
            
                
$(function() {
    var selectedClass = "";
    $(".filter").click(function(){ 
    selectedClass = $(this).attr("data-rel"); 
    $("#gallery").fadeTo(100, 0.1);
        $("#gallery div").not("."+selectedClass).fadeOut().removeClass('animation');
            setTimeout(function() {
            $("."+selectedClass).fadeIn().addClass('animation');
            $("#gallery").fadeTo(300, 1);
        }, 300); 
    });
});
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 d-flex justify-content-center mb-5">

        <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="all">All</button>
        <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="1">Mountains</button>
        <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="2">Sea</button>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="gallery" id="gallery">

    <!-- Grid column -->
    <div class="mb-3 pics animation all 3">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Card image cap">
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 pics animation all 1">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 pics animation all 1">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg" alt="Card image cap">
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 pics animation all 2">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">        
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 pics animation all 2">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 pics animation all 1">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg" alt="Card image cap">
    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            




Gallery with modals MDB Pro component

video
video
video
video
video
video
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-lg-4 col-md-12 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->

        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg" alt="video" data-toggle="modal" data-target="#modal1"></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->
        
        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg" alt="video" data-toggle="modal" data-target="#modal6"></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->
        
        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg" alt="video" data-toggle="modal" data-target="#modal4"></a>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-lg-4 col-md-12 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GUEZCxBcM78" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->
        
        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-4.jpg" alt="video" data-toggle="modal" data-target="#modal2"></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PjGkVCAo8Fw" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->

        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-5.jpg" alt="video" data-toggle="modal" data-target="#modal5"></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6 mb-4">

        <!--Modal: Name-->
        <div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gsNY7TV4r1M" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer d-block d-md-flex justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->
        
        <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-6.jpg" alt="video" data-toggle="modal" data-target="#modal3"></a>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            


Gallery with photo titles MDB Pro component

                
// MDB Lightbox Init
$(function () {
    $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
                
            
                
<div class="row">
    <div class="col-md-12">

        <div id="mdb-lightbox-ui"></div>

        <div class="mdb-lightbox no-margin">

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(121).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(121).jpg" class="img-fluid">
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(96).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(96).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(104).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(104).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(45).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(122).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(122).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(125).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(125).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

            <figure class="col-md-4">
                <a class="black-text" href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(119).jpg" data-size="1600x1067">
                    <img alt="picture" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(119).jpg" class="img-fluid" />
                    <h3 class="text-center my-3">Photo title</h3>
                </a>
            </figure>

        </div>

    </div>
</div>
                
            

Gallery with slides and captions

                
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-2" data-slide-to="1"></li>
        <li data-target="#carousel-example-2" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view hm-black-light">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(105).jpg" alt="First slide">
                <div class="mask"></div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">This is the first title</h3>
                <p>First text</p>
            </div>
        </div>
        <div class="carousel-item">
            <!--Mask color-->
            <div class="view hm-black-light">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(115).jpg" alt="Second slide">
                <div class="mask"></div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">Thir is the second title</h3>
                <p>Secondary text</p>
            </div>
        </div>
        <div class="carousel-item">
            <!--Mask color-->
            <div class="view hm-black-light">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(108).jpg" alt="Third slide">
                <div class="mask"></div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">This is the third title</h3>
                <p>Third text</p>
            </div>
        </div>
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
                
            
// MDB Lightbox Init $(function () { $("#mdb-lightbox-ui").load("../../mdb-addons/mdb-lightbox-ui.html"); });