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.

<div class="row" id="gallery">
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-1">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-2">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-3">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-4">
</div>
</div>

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:

<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">  <div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-1" data-target="#carouselExample" data-slide-to="0">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-2" data-target="#carouselExample" data-slide-to="1">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-3" data-target="#carouselExample" data-slide-to="2">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="w-100" src="/image-4" data-target="#carouselExample" data-slide-to="3">
</div>
</div>

Step 2: create the lightbox.

  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:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Carousel markup goes in the modal body -->

<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/image-1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/image-2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/image-3">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/image-4">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Step 3: crop images (optional)

// Use Bootstrap breakpoints for consistency.
$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;
// Crop thumbnail images.
#gallery {

img {
height: 40vw;
object-fit: cover;

@media (min-width: $bootstrap-md) {
height: 25vw;
}

@media (min-width: $bootstrap-lg) {
height: 18vw;
}
}
}
// Crop images in lightbox.
.carousel-item {

img {
height: 60vw;
object-fit: cover;

@media (min-width: $bootstrap-sm) {
height: 350px;
}
}
}

That’s it!

--

--

Design, code, nature. Founder of birdboar.co

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store