Responsive Image Gallery & Lightbox Plugin using Bootstrap

Bootstrap Gallery With this script and Bootstrap 4, you can easily create an image gallery. You just have to put the thumbnails on the page. The BS Gallery plugin displays a set of images in the Bootstrap popup, which the user can browse by clicking the next/previous button.

To use this script you will need Bootstrap, a famous CSS framework, and jQuery (tested with Bootstrap v4.1.3 and jQuery v3.3.1).

If you are targetting Bootstrap 3, you must use v1.0 (tested with Bootstrap v3.3.7 and jQuery v1.12.4).

Must Read: Lightweight And Responsive Image Gallery With Thumbnails For Vue.js

How to make use of it:

1. Load the required sources within the HTML file.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

2. Load the Bootstrap Gallery plugin’s information.

<link rel="stylesheet" href="./minified/bootstrap-gallery.min.css" />
<script src="./minified/bootstrap-gallery.min.js"></script>

3. Add the CSS class thumbnail to image links.

<a href="1.jpg" class="thumbnail">
  <img src="1.jpg" alt="Alt 1" />

<a href="2.jpg" class="thumbnail">
  <img src="2.jpg" alt="Alt 2" />

<a href="3.jpg" class="thumbnail">
  <img src="3.jpg" alt="Alt 3" />


4. Group your image collections utilizing the data-gallery attribute on the web page.

<a href="1.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="1.jpg" alt="Alt 1" />

<a href="2.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="2.jpg" alt="Alt 2" />

<a href="3.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="3.jpg" alt="Alt 3" />

<a href="4.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="4.jpg" alt="Alt 4" />

5. It additionally helps with plain text links.

<a href="1.jpg" class="show-gallery">
  Text Link 1

<a href="2.jpg" class="show-gallery">
  Text Link 2

<a href="3.jpg" class="show-gallery">
  Text Link 3


6. An {custom} selectors:

<a href="1.jpg" class="custom-selector">
  Text Link 1

See Demo And Download


Official Website(ludovicscribe): Click Here

This superior jQuery/javascript plugin is developed by ludovicscribe. For extra Advanced Usage, please go to the official website.

Related Posts


A Simple Infinite Image Carousel Using Pure Javascript

simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS. Must Read: Flip Sliding Carousel Gallery Made Of…


A Vue3 Block Organization Tree View Component Library

Block tree is a simple organizational hierarchical horizontal or vertical tree view based on Vue3.x. It supports events, slots, horizontal visibility, and node processing. Thanks to hukaibaihu…


Front-End Image Preview For Mobile-Web Applications | imagePreview

Mobile JS photo preview plug-in supports rotation and zoom (two fingers / double click), and comfort and smoothness is the biggest pursuit. ImagePreview is an iOS-style, mobile-first,…


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript…


[mdb-ui-kit] Latest Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap Material Design UI KIT – Build responsive mobile projects on the web using the world’s most popular material design front-end component library. This is a pure…

Leave a Reply

Your email address will not be published. Required fields are marked *