Create a lightbox gallery with standard Bootstrap components.

There are plenty of great lightbox plugins out there, but you can easily make your own lightbox gallery using Bootstrap. No custom JS needed! All you have to do is add a few data attributes to your markup.

Here’s an example in Codepen. Read on for a step-by-step.

Step 1: create your gallery.

This is simply a grid of pictures. With Bootstrap it could look something like this:

This is where you’ll need to add those data attributes.

  1. Add to the gallery element. This makes it so clicking anything in the gallery opens the lightbox (a.k.a. modal).
    should be set to the of the modal, which you will create later.
  2. Add to each image (or image wrapper).
    should be set to the of the carousel, which you will create later. And should be set according to where the image is in the gallery. The first image is , the second is , the third is , etc.

So the gallery markup from above would look like this:

Step 2: create the lightbox.

This is a carousel inside a modal, both are standard Bootstrap components. Nothing fancy here — just copy the code from the Bootstrap docs and edit id’s/content as needed.

  1. The modal should match the of the gallery element.
  2. The carousel should match the of the images in the gallery.
  3. The carousel slides should match the gallery images and must be in the same order.

Using the values from our example gallery, it could look like this:

Step 3: crop images (optional)

This isn’t necessary, but if your images are different sizes you can crop them with CSS to keep things looking tidy.
The values in the example below can be tweaked as needed to fit your particular layout.

That’s it!

All that’s left is to style your gallery and lightbox however you want.

Design, code, nature. Founder of birdboar.co

Design, code, nature. Founder of birdboar.co