Bootstrap 5 Lightbox Gallery
A Bootstrap 5 Lightbox Gallery is a UI pattern that displays a grid of thumbnail images which, when clicked, open a larger version of the image in an overlay modal without navigating away from the page. It combines Bootstrap's modal component with a structured image grid to create a seamless browsing experience. Use it on portfolio pages, product photo galleries, event coverage sections, or any context where users need to inspect images in detail.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- A wedding photographer's portfolio page where couples can click thumbnail shots to view full-resolution ceremony and reception photos in an overlay
- An e-commerce product page showing multiple product angles as thumbnails, each opening a zoomable full-size view in a lightbox modal
- A real estate listing page where property interior and exterior photos are displayed as a grid with each image expanding into a full-screen overlay for closer inspection
- A conference or event recap page where attendee and speaker photos are arranged in a masonry grid and can be viewed individually in a modal without leaving the page
Variants and classes
| Variant | Description and classes |
|---|---|
| Thumbnail grid | Clickable thumbnails in a responsive grid.row g-3 + col-6 col-md-4 + img-fluid rounded |
| Modal viewer | Large image opens in a centred modal.modal fade + modal-dialog modal-xl modal-dialog-centered |
| Transparent frame | Image floats on the dark backdrop.modal-content bg-transparent border-0 + btn-close btn-close-white |
| Carousel in the modal | Previous and next between images.carousel slide inside modal-body |
Code example
<section class="py-5 bg-light">
<div class="container">
<h2 class="fw-bold mb-4">Project Gallery</h2>
<div class="row g-3">
<!-- Thumbnail 1 -->
<div class="col-6 col-md-4">
<a href="#" data-bs-toggle="modal" data-bs-target="#lightbox1">
<img src="https://picsum.photos/seed/arch1/600/400" class="img-fluid rounded shadow-sm" alt="Modern office interior">
</a>
</div>
<!-- Thumbnail 2 -->
<div class="col-6 col-md-4">
<a href="#" data-bs-toggle="modal" data-bs-target="#lightbox2">
<img src="https://picsum.photos/seed/arch2/600/400" class="img-fluid rounded shadow-sm" alt="Open-plan workspace">
</a>
</div>
<!-- Thumbnail 3 -->
<div class="col-6 col-md-4">
<a href="#" data-bs-toggle="modal" data-bs-target="#lightbox3">
<img src="https://picsum.photos/seed/arch3/600/400" class="img-fluid rounded shadow-sm" alt="Rooftop terrace">
</a>
</div>
</div>
</div>
</section>
<!-- Lightbox Modal 1 -->
<div class="modal fade" id="lightbox1" tabindex="-1" aria-label="Modern office interior" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-transparent border-0">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center p-2">
<img src="https://picsum.photos/seed/arch1/1200/800" class="img-fluid rounded" alt="Modern office interior">
<p class="text-white mt-3 small">Modern office interior, 2024</p>
</div>
</div>
</div>
</div>
<!-- Lightbox Modal 2 -->
<div class="modal fade" id="lightbox2" tabindex="-1" aria-label="Open-plan workspace" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-transparent border-0">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center p-2">
<img src="https://picsum.photos/seed/arch2/1200/800" class="img-fluid rounded" alt="Open-plan workspace">
<p class="text-white mt-3 small">Open-plan workspace, 2024</p>
</div>
</div>
</div>
</div>
<!-- Lightbox Modal 3 -->
<div class="modal fade" id="lightbox3" tabindex="-1" aria-label="Rooftop terrace" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-transparent border-0">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center p-2">
<img src="https://picsum.photos/seed/arch3/1200/800" class="img-fluid rounded" alt="Rooftop terrace">
<p class="text-white mt-3 small">Rooftop terrace, 2024</p>
</div>
</div>
</div>
</div>Live examples
Basic Lightbox Gallery
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generated lightbox gallery with custom colours
- Lightbox Gallery with interactive states
- Responsive lightbox gallery for all screen sizes
Best practices
Use a dark modal backdrop for image contrast
Set the modal backdrop to near-black by adding inline CSS or a custom class (e.g., background-color: rgba(0,0,0,0.92)) on the modal element itself, not the backdrop, so the full-size image pops visually against a dark surround rather than the default grey.
Keep thumbnail aspect ratios consistent with object-fit
Apply CSS classes like object-fit: cover and a fixed height (e.g., height: 220px) to all thumbnail images so the grid stays uniform even when source images have varying dimensions, preventing an uneven, jagged layout.
Add keyboard navigation between images
Listen for keydown events (ArrowLeft and ArrowRight) using vanilla JavaScript to programmatically close the current modal and open the next or previous one, giving keyboard and assistive-technology users a proper browsing flow.
Lazy-load full-size images to protect page speed
Store the full-resolution image URL in a data attribute (e.g., data-full-src) on each thumbnail anchor, then inject it into the modal img src only when the modal's show.bs.modal event fires, so large images do not download on initial page load.