# Quickly Create a Bootstrap 5 Lightbox Gallery
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.
## Requirements
### Bootstrap 5
This might be obvious, but before we get started you’ll need a project that uses [Bootstrap 5](https://getbootstrap.com/docs/5.1/getting-started/introduction/), or you can use something like [codepen.io](https://codepen.io) to create a sandbox environment. Here I will be using the [Bootstrap 5 CDN](https://www.jsdelivr.com/package/npm/bootstrap).
## Our Solution
### [Lightbox for Bootstrap 5](https://github.com/trvswgnr/bs5-lightbox)
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)](https://bundlephobia.com/package/bs5-lightbox@1.8.0), so it won’t slow down your site.
We will be using the [CDN from jsDelivr](https://www.jsdelivr.com/package/npm/bs5-lightbox) in these examples, but you can use the [NPM Package](https://www.npmjs.com/package/bs5-lightbox) if you prefer.
## Install
### Check Bootstrap 5
To get started, make sure you have Bootstrap 5 styles added inside the `` of your HTML document:
```html
```
Then make sure the scripts are included before the closing `` tag:
```html
```
### Add Lightbox for Bootstrap 5 CDN
Add the CDN script for bs5-lightbox after the Bootstrap script tag:
```html
```
## Configure
To create a lightbox gallery we just need to create some images and add data attributes. Here is a simple example:
```html
```
%[https://codepen.io/trvswgnr/pen/GRQxmwQ]
More examples and options can be found at the [Lightbox for Bootstrap 5 Documentation](https://trvswgnr.github.io/bs5-lightbox/).
## Summary
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](https://github.com/trvswgnr/bs5-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.)*
