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 data-toggle="modal" data-target="#exampleModal" to the gallery element. This makes it so clicking anything in the gallery opens the lightbox (a.k.a. modal).
    data-target should be set to the id of the modal, which you will create later.
  2. Add data-target="#carouselExample" data-slide-to="0" to each image (or image wrapper).
    data-target should be set to the id of the carousel, which you will create later. And data-slide-to should be set according to where the image is in the gallery. The first image is 0, the second is 1, the third is 2, 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 id should match the data-target of the gallery element.
  2. The carousel id should match the data-target 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 height 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

Design, code, nature. Founder of