Lightbox for Bootstrap 5

Utilizes Bootstrap 5's Modal & Carousel plugins to implement a lightbox gallery - GitHub


Using NPM: ```shell $ npm i bs5-lightbox ``` __**`index.js`**__ ```js import 'bs5-lightbox'; ``` Or grab the latest JS from the CDN and add it after Bootstrap's JS:
<script src=""></script>
Or [download the file directly]( (right-click, Save As...) Lightbox for Bootstrap 5 will automatically initialize on import, simply add `data-toggle="lightbox"` to your anchor tags. ```html ``` If you want to target a different element, import the Lightbox class and instantiate it on an event: __**`index.js`**__ ```js import Lightbox from 'bs5-lightbox'; document.querySelectorAll('.my-lightbox-toggle').forEach(el => el.addEventListener('click', Lightbox.initialize)); ``` Obviously, you need Bootstrap (made for Bootstrap 5).


Lightbox for Bootstrap 5 accepts all of the options that Bootstrap's Modal and Carousel classes accept, with a few additions.

Name Type Default Description
target string (valid CSS selector) '[data-toggle="lightbox"]' The target element selector to trigger lightbox events
gallery array | string '' Optional gallery of elements or string containing gallery name
size 'default' | 'sm' | 'lg' | 'xl' | 'fullscreen' 'xl' Size of lightbox
constrain boolean true Don't allow images to be larger than their original size

Pass options as an object to the second parameter when creating an instance of the lightbox.

__**`index.js`**__ ```js import Lightbox from 'bs5-lightbox'; const options = { keyboard: true, size: 'fullscreen' }; document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => { e.preventDefault(); const lightbox = new Lightbox(el, options);; })); ```


Thanks to for the images.

Single Image

Note: add captions using the data-caption or data-footer attribute

Image Gallery

Galleries are created by adding the data-gallery attribute.



You can use various YouTube URL formats, the regex used is: /^.*(\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/

Parameters are allowed in the URL (e.g. ``)

Justin Bieber - LoveYourself

Tame Impala - Elephant (using link)


You cannot embed Vimeo videos using the standard url (ie; you must link to the embed source (ie This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

City Lights - from Colin Rich (using embed link)

City Lights - from Colin Rich (with recommended data-remote setting)



This also works with photos: Instagram

Gallery of Videos

Mixed gallery

Via data-remote or data-src

Neither of these are <a> tags, so both rely on the data-remote or data-srcattributes.

Force type

If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what data-type it is.

Current allowed types are: ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url', 'html']

Click here for an image, but with no extension.

This link is missing the type attribute, and will iframe the image.

Hidden elements

Only show a few images but have a large gallery

Remote content

Given a URL that is not an image or video (including unforced types), load the content using an iFrame.

Bootstrap Docs

Custom HTML

Pass custom HTML into the `data-src` attribute, then add the attribute `data-type="html"`.

Custom HTML 1

Custom HTML 2


Lightbox for Bootstrap 5 is written in TypeScript and compiled to pure JavaScript. Modify the src/index.ts file, run `npm run build` and create a pull request.

You can help make this project even better and keep it up to date by making a small contribution! Fund this project.