Lightbox Code | Bootstrap 5.3 snippet for building image and video lightboxes for the web

A lightbox is a JavaScript and CSS-powered modal overlay that appears over a web page, dimming the background to focus attention on specific content, like images and videos. We have two versions: lightboxes that display images and videos in a Bootstrap modal and Lightbox 2, a third-party application for displaying enlarged images. All of our snippets are used by us in the development of professional websites.

☀ Framework: Bootstrap v5.3 ☀ Languages: HTML, CSS, jQuery, JavaScript ☀ Structural elements: 2 lightboxes ☀ Deliverable: 1 HTML file, 1 CSS file, 1 JS file, Lightbox 2, and licensing information

This snippet does not come with navigation or a footer. It contains only the code to create two lightbox, in an HTML file that can be opened in a web browser. See our Bootstrap Development Kit for full-page templates.

It would be helpful to have some knowledge of Bootstrap, HTML, and CSS to use this snippet, but it's also a great way to learn as you go.

Our code has been exhaustively tested by us for workability, cross-browser compatibility, responsive breakpoints, and conformity with Web Content Accessibility Guidelines (WCAG).

RESTRICTIONS: Any and all images in this snippet are placeholders for visual reference only and cannot be reused in any capacity by you due to the licensing requirements set forth by the artists who own these works. Links are provided to the original artist(s) so that you may purchase your own commercial license(s), if available, should you wish to use these images.

LICENSING: You are permitted to use this snippet (excepting any graphics) to create your own personal or commercial products. You are not permitted to resell or otherwise distribute the snippet as is (such as a template), or in any form that competes with our own products. Please contact us for a copy of our licensing and usage documentation if you wish to see it before purchasing.

THIRD PARTIES: This snippet is a derivative of 7 works: Bootstrap, jQuery, Google Fonts, HTML, CSS, JavaScript, and Lightbox 2. All of these are open source so there is no need to purchase additional licenses to use our code. We link to some packages via CDMs but include the URLs to download the source files if you wish to work offline.

DOCUMENTATION: Our snippet comes with extensive comments, licensing and testing information, known oddities (if any), and general notes.

We welcome questions, comments, and suggestions! 😊