Bootstrap image gallery with lightbox. A lightweight jQuery plugin that creates responsive grid layout image gallery from list of images with Bootstrap 4.x. The plugin also provide lightbox that support image sliding with next and previous button.
Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
Plugin: | bsPhotoGallery |
Author: | Michael Soriano |
Licence: | GPL 3.0 |
Published: | March 29, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 and Popper Js 1.12.3 or Later |
File Type: | zip archive (HTML, CSS & JavaScript) |
Package Size: | 47 KB |
How to Use Bootstrap Image Gallery:
1. To getting started with Bootstrap image gallery, load the jQuery, Bootstrap framework and Popper Js into HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Popper Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
2. Create list of images for Bootstrap Gallery like below.
<ulvclass="row first"> <li> <img alt="Your image alt text" src="your-first-image-path"> <p>Some text after the photo</p> </li> <li> <img alt="Your image alt text" src="your-second-image-path"> <p>Some text after the photo</p> </li> --------------------------------------------------------- --------------------------------------------------------- <li> <img alt="Your image alt text" src="your-n-image-path"> <p>Some text after the photo</p> </li> </ul>
3. Initialize the plugin in jQuery document ready function.
$(document).ready(function(){ $("ul.first").bsPhotoGallery(); });
Advance Configuration Options for Bootstrap Image Gallery
The following are some advance configuration options to create / customize bootstrap image gallery with lightbox.
classes |
Bootstrap Grid classes. By default, “col-xl-2 col-lg-2 col-md-2 col-sm-4” shall be used.
$("ul.first").bsPhotoGallery({ classes: "col-xl-2 col-lg-2 col-md-2 col-sm-4", }); |
hasModal |
Show larger image in a modal when clicked. By default, true is used. $("ul.first").bsPhotoGallery({ hasModal: true }); |
showControl |
show next / previous buttons in modal. By default, true is used. $("ul.first").bsPhotoGallery({ showControl: true }); |
shortText |
Truncate text to a single line in grid. By default, true is used.
$("ul.first").bsPhotoGallery({ shortText: true }); |