Image Lightbox Dialog

Dark Bootstrap 6 Dialog lightbox that opens gallery thumbnails large, with previous/next buttons, arrow-key and swipe navigation, captions and a photo counter.

Also known as: image lightbox, photo gallery popup, lightbox gallery modal, image viewer modal

Bootstrap 6 Modals Responsive Dark #dark #gallery #image #lightbox #modal

Image Lightbox Dialog live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A dark photo gallery with a lightbox built on the Bootstrap 6 Dialog component. Clicking a thumbnail opens the photo large, with a caption, a "1 / 6" counter and previous/next buttons. Arrow keys and swipe gestures also change the photo. Use it for portfolios, project galleries, product photos or blog image sets.

How it works

The root .ilb-root (pinned to data-bs-theme="dark") contains a heading and a ul.ilb-grid of button.ilb-thumb elements. Each button carries the large image URL in data-ilb-src, a title in data-ilb-title and a caption in data-ilb-meta. Its <img> alt text is reused in the lightbox. Each button opens the single <dialog class="dialog dialog-xl ilb-dialog"> through data-bs-toggle="dialog".

script.js reads all photos from the thumbnails once. On show.bs.dialog it uses event.relatedTarget to find out which thumbnail was clicked and shows that photo. .ilb-prev and .ilb-next wrap around at the ends. A keydown listener on the dialog handles ArrowLeft and ArrowRight, and pointer events on .ilb-image detect a horizontal swipe. Neighbouring photos are preloaded, and .is-loading dims the image while the next one loads. Inside the fixed-height .ilb-stage, portrait and landscape photos are letterboxed with object-fit: contain.

The photos come from Unsplash; replace them with your own images.

Customization

--ilb-accent on .ilb-root: the color of the kicker, the active counter number and the focus outlines.
grid-template-columns on .ilb-grid: 2 columns on phones and 3 from 768px; use 4 for larger sets.
--bs-dialog-width on .ilb-dialog and height on .ilb-stage: the size of the lightbox and of the image area.
--bs-dialog-backdrop-bg on .ilb-dialog: how dark the page behind the photo becomes.
Add a photo by copying an li and setting data-ilb-src, data-ilb-title, data-ilb-meta and the alt text; the counter updates itself.
data-ilb-autoopen="0" opens the first photo on load for the preview. Remove it in production.

Use cases

Portfolios: thumbnails open the photo large with a caption and a counter such as 1 / 6
Project galleries: previous and next buttons, arrow keys and swipe gestures change the photo
Product photo sets: portrait and landscape images fit the stage without being cropped
Blog image sets: neighbouring photos are preloaded so browsing feels quick

Accessibility

Thumbnails are real buttons with a visible focus outline. Their images have descriptive alt text, which the lightbox image reuses. The dialog is labelled by the photo title, and the counter is an aria-live region, so changes are announced. The previous, next and close buttons have aria-labels. Escape closes the dialog, and focus returns to the thumbnail that opened it. Hover zoom and image fades are disabled under prefers-reduced-motion.

Bootstrap 6 notes

This is built on Bootstrap 6.0.0-alpha.1, and alpha APIs can still change. The BS5 modal modal-xl + modal-dialog + modal-content wrappers become one <dialog class="dialog dialog-xl">. Events are show.bs.dialog and shown.bs.dialog, and relatedTarget still points to the trigger. Icon buttons use btn-icon, and btn-close no longer needs btn-close-white on dark backgrounds.

Image Lightbox Dialog at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile, dark design
Category: Modals
License: Free for personal and commercial use

Questions about this template

Can I use the Image Lightbox Dialog code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.