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.
Primary Class
.lightbox-galleryCommon 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 & Classes
| Variant | Description |
|---|---|
| Lightbox Gallery Default | Standard lightbox gallery with Bootstrap's default styling. |
| Lightbox Gallery Responsive | Responsive variant that adapts to different screen sizes. |
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 Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.