Back when I was using Bootstrap 4, I always reached for a package called “Ekko Lightbox” for creating simple lightbox galleries. When I migrated to Bootstrap 5, it seemed that I was out of luck since that package hadn’t been updated. I didn’t want to import jQuery into my project, and I didn’t want a bloated package that would make my site slow. I scoured the internet, but kept reaching dead ends.
After a few hours of frustration, I thought, “Why not just make my own package that I can reuse on my clients’ websites?” This prompted me to make the solution (or rather, solutions) that I’ll be going over in this article.
This might be obvious, but before we get started you’ll need a project that uses Bootstrap 5, or you can use something like codepen.io to create a sandbox environment. Here I will be using the Bootstrap 5 CDN.
This lightweight package makes creating lightbox galleries quick, easy, and familiar. If you used Ekko Lightbox in the past, then you will already know how to setup Lightbox for Bootstrap 5 (aka bs5-lightbox). Best of all, it’s only 2.8Kb zipped (via Bundlephobia), so it won’t slow down your site.
Check Bootstrap 5
To get started, make sure you have Bootstrap 5 styles added inside the
<head> of your HTML document:
<link href="https://email@example.com/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Then make sure the scripts are included before the closing
<script src="https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Add Lightbox for Bootstrap 5 CDN
Add the CDN script for bs5-lightbox after the Bootstrap script tag:
<script src="https://email@example.com/dist/index.bundle.min.js" integrity="sha256-zFbZ1Ykp6EzYM4IOMstebe2Gqoxz8ML85LP4JGcA+eA=" crossorigin="anonymous"></script>
To create a lightbox gallery we just need to create some images and add data attributes. Here is a simple example:
<div class="row"> <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4"> <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> </a> <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4"> <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid"> </a> <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4"> <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid"> </a> </div>
More examples and options can be found at the Lightbox for Bootstrap 5 Documentation.
This article may be a little short, but that's just a testament to how easy this is to use! There are quite a few more features and options available, but this is the easiest way to get a Bootstrap 5 Lightbox up and running.
If you found this useful then make sure you follow me for more tips and tools like this!
(Prefer to use NPM? I will be writing another article soon to accompany this one where I will go into more detail explaining bs5-lightbox's options and features.)