Key Takeaways
- GLightbox 3.x is a dependency-free library (no jQuery) that works cleanly alongside Bootstrap 5’s own JavaScript.
- You can trigger images, YouTube/Vimeo videos, local videos, and inline HTML from a single unified
GLightbox()initialisation call. - Grouping links into galleries requires only a shared
data-galleryattribute, no extra markup. - Video popups require the correct
data-typeattribute or GLightbox cannot detect the source automatically. - Keyboard navigation and focus management are built in, but you should still verify contrast and ARIA labels in your own theme.
- The Canvas HTML Template ships with GLightbox pre-configured so the setup steps below are already handled for you.
What Is GLightbox and Why Use It With Bootstrap 5
GLightbox (current stable release: 3.0.9) is a modern, zero-dependency lightbox library written in vanilla JavaScript. It replaces older jQuery-dependent options like Magnific Popup and FancyBox 3, and weighs roughly 22 KB minified before gzip. No jQuery dependency means it slots into a Bootstrap 5 project without the version-conflict headaches that plagued Bootstrap 4 setups.
The case for GLightbox over Bootstrap’s native modal component comes down to three specific gaps. Bootstrap modals are the right tool for dialogs and forms (the Making Bootstrap 5 Modals Accessible post covers the ARIA detail involved), but they require manual slide navigation logic, do not handle YouTube iframes natively, and need extra work to maintain aspect ratio on video. GLightbox handles all three without additional configuration.
Installation: CDN, npm, and Template-Based Setups
For a standalone Bootstrap 5 project, the fastest path is CDN:
<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<!-- Before </body> -->
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
const lightbox = GLightbox();
</script>If you manage dependencies with npm (common in Vite or webpack workflows, covered in the comparison at Gulp vs Vite vs Webpack for HTML Template Workflows), install the package directly:
npm install glightboxThen import it in your entry file:
import GLightbox from 'glightbox';
import 'glightbox/dist/css/glightbox.min.css';
const lightbox = GLightbox();Inside Canvas, GLightbox is already bundled inside plugins.min.js and initialised through functions.bundle.js, so the CDN and npm steps are not needed. You only need to add the correct data attributes to your markup.
Building an HTML Lightbox Gallery With Images
The selector GLightbox listens to by default is .glightbox. Any anchor with that class and an href pointing to an image URL will open in the lightbox. Grouping multiple images into a navigable gallery requires a shared data-gallery value:
<div class="row g-3">
<div class="col-4">
<a href="images/photo-01-large.jpg"
class="glightbox"
data-gallery="portfolio"
data-glightbox="title: Landscape One; description: Shot at sunrise">
<img src="images/photo-01-thumb.jpg" alt="Landscape One" class="img-fluid rounded">
</a>
</div>
<div class="col-4">
<a href="images/photo-02-large.jpg"
class="glightbox"
data-gallery="portfolio"
data-glightbox="title: Landscape Two">
<img src="images/photo-02-thumb.jpg" alt="Landscape Two" class="img-fluid rounded">
</a>
</div>
<div class="col-4">
<a href="images/photo-03-large.jpg"
class="glightbox"
data-gallery="portfolio">
<img src="images/photo-03-thumb.jpg" alt="Landscape Three" class="img-fluid rounded">
</a>
</div>
</div>The data-glightbox attribute accepts a semicolon-separated string. Supported keys include title, description, type, effect, and width. Titles render below the media inside the overlay and matter for accessibility: they give screen reader users context about what they are viewing.
If you are building a portfolio that combines Bootstrap 5 cards with this gallery pattern, the post on 9 Bootstrap 5 Card Layouts for Portfolios and Blogs has complementary layout approaches worth combining here.
Creating a Video Popup in Bootstrap 5
This is where developers most commonly run into trouble. GLightbox can detect YouTube and Vimeo URLs automatically, but only if the URL format is exact. A shortened URL or a playlist link will cause detection to fail silently, and the lightbox will attempt to load the URL as an image.
Safe YouTube format: https://www.youtube.com/watch?v=VIDEO_ID
Safe Vimeo format: https://vimeo.com/VIDEO_ID
Set data-type="video" explicitly on every video trigger to avoid relying on auto-detection:
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="glightbox"
data-type="video"
data-glightbox="title: Product Overview">
<img src="images/video-thumbnail.jpg" alt="Watch product overview video" class="img-fluid rounded">
</a>For a self-hosted MP4 file, set data-type="video" and point the href at the file path:
<a href="videos/demo-reel.mp4"
class="glightbox"
data-type="video"
data-glightbox="width: 900px">
Watch Demo
</a>GLightbox wraps self-hosted video in a <video> element with controls automatically. You do not need to write the video tag yourself.
Inline HTML and iFrame Popups
For popups containing a contact form, a pricing table, or arbitrary HTML, use data-type="inline" and point the href at a CSS selector:
<!-- Trigger -->
<a href="#contact-popup"
class="glightbox btn btn-primary"
data-type="inline">
Open Contact Form
</a>
<!-- Hidden content -->
<div id="contact-popup" class="p-4" style="display:none; max-width:540px;">
<h4>Get in Touch</h4>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>The hidden div is cloned into the lightbox, so the original element stays in the DOM. This matters when you are using form libraries that bind events to specific node references. You may need to reinitialise those bindings inside the onOpen callback.
Key Configuration Options You Should Know
Most developers accept the defaults and later discover that changing them requires understanding the initialisation object. The options that come up most in real projects:
- selector: defaults to
".glightbox". Change this if you are initialising multiple independent lightboxes on one page. - openEffect / closeEffect: accepts
"zoom","fade", or"none"."none"is the better choice for reduced-motion users and pairs well with a CSSprefers-reduced-motionmedia query. - slideEffect: controls gallery transition. Options are
"slide","fade","zoom", or"none". - autoplayVideos: defaults to
true. Set tofalseif your videos contain audio that should not play without user intent. - loop: defaults to
false. Set totruefor carousel-style gallery behaviour. - moreLength: controls how many characters of a description are shown before a “see more” link appears. Default is 60.
<script>
const lightbox = GLightbox({
selector: '.glightbox',
openEffect: 'fade',
closeEffect: 'fade',
slideEffect: 'slide',
autoplayVideos: false,
loop: true
});
</script>Using GLightbox Inside the Canvas Template
Canvas ships with GLightbox already initialised. The relevant call lives inside functions.bundle.js under the lightbox module and targets .glightbox by default, matching the standard selector. No second GLightbox() call is needed.
To run a second independent lightbox instance on the same page (for example, a testimonial video separate from a portfolio grid), add a new initialisation call in a page-specific script block after functions.bundle.js loads:
<script>
document.addEventListener('DOMContentLoaded', function () {
GLightbox({ selector: '.glightbox-testimonial', autoplayVideos: true });
});
</script>Canvas also exposes the theme colour through --cnvs-themecolor, which you can use to tint the GLightbox close button and navigation arrows to match your palette:
<style>
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
background-color: var(--cnvs-themecolor);
}
</style>Frequently Asked Questions
No. GLightbox manages its own overlay and focus trap independently of Bootstrap’s modal JavaScript. Both can coexist on the same page as long as you do not open them simultaneously. If a user opens a Bootstrap modal and then clicks a lightbox trigger inside it, GLightbox will open on top and manage its own keyboard events. Close both in the correct order to avoid stacked z-index issues.
The most common cause is a non-standard URL format. GLightbox requires https://www.youtube.com/watch?v=ID. Shortened youtu.be URLs and playlist URLs with &list= parameters can cause silent failures. Always set data-type="video" explicitly and test with a clean watch URL first.
Yes, and this is a common pattern for portfolio sections. Place .glightbox anchor tags inside Swiper slides. Swiper handles the horizontal carousel; clicking a slide opens the full image or video in GLightbox. One thing to test carefully: Swiper may intercept click events on draggable slides, so verify the behaviour on touch devices before shipping. The post on Integrating Swiper.js Sliders Into a Bootstrap 5 Template covers the Swiper setup in detail.
The GLightbox() function returns an instance object. Store it in a variable and call lightbox.close() at any point. You can also open a specific slide by index: lightbox.openAt(2) opens the third item in the gallery.
GLightbox 3.x includes a focus trap that moves focus into the overlay on open and returns it to the trigger element on close. Navigation arrows are keyboard-focusable. That said, you should add descriptive alt text to all thumbnail images and populate the title key in data-glightbox for every media item so screen readers can announce the content. The close button’s default ARIA label is “Close” and does not need modification.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup and build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog