How to Build a Responsive Bootstrap Lightbox Gallery

It’s time for another handy Bootstrap extension, folks! Today, we’ll build something that I’m sure many of you wish was integrated into Bootstrap by default: a responsive lightbox gallery.

How many times have you needed to add a responsive lightbox gallery to a Bootstrap project? In such a situation you might have tried an external JavaScript plugin like PhotoSwipe. However, you can create a simple yet fully functional responsive lightbox gallery by taking advantage of existing Bootstrap components. This tutorial will show you how to achieve this with minimal effort.

Although not required, good knowledge of Bootstrap will be beneficial to follow along with this tutorial.

Our Responsive Bootstrap Lightbox Extension

Without further ado, here’s what we’ll be creating (click an image to open the lightbox):

Get Thousands of Bootstrap Templates on Envato Elements

Check out Envato Elements for a huge collection of Bootstrap templates, website designs, and Bootstrap-based WordPress themes—unlimited downloads with your monthly subscription!

1. Define the HTML Markup

Create an Image Grid

To begin with, we’ll create an image grid to reveal the beauty of Ireland through some Unsplash images. To do this, we’ll take advantage of Bootstrap’s grid system.

All images should have the same dimensions. In our case, we’ll work with big ones (1920px x 1280px). These will appear as soon as the lightbox opens.

Here’s the required structure for our grid:

<section class="image-grid">
  <div class="container-xxl">
    <div class="row gy-4">
      <div class="col-12 col-sm-6 col-md-4">
        <figure>
          <a class="d-block" href="">
            <img width="1920" height="1280" src="ireland1.jpg" class="img-fluid" alt="Ring of Kerry, County Kerry, Ireland" data-caption="Ring of Kerry, County Kerry, Ireland">
          </a>
        </figure>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <figure>
          <a class="d-block" href="">
            <img width="1920" height="1280" src="ireland2.jpg" class="img-fluid" alt="Fintown, Ireland" data-caption="Fintown, Ireland">
          </a>
        </figure>
      </div>
      <!-- more columns here -->
    </div>
  </div>
</section>

Build the Modal Skeleton

We’ll continue by specifying a part of the markup needed for registering a full-screen Bootstrap modal. Its main content will be created dynamically and hold a Bootstrap carousel.

<div class="modal lightbox-modal" id="lightbox-modal" tabindex="-1">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body">
        <div class="container-fluid p-0">
          <!-- JS content here -->
        </div>
      </div>
    </div>
  </div>
</div>

2. Add Some Styles

Coming up next, we’ll add some styles for our project.

Most importantly:

The Bootstrap lightbox images will have a maximum height equal to the viewport height. Additionally, we’ll set their width to auto.
The carousel controls will be vertically centered, and their height won’t be equal to the carousel height (as happens by default with Bootstrap carousels). We do this because there will be an extra close button on the top right of the lightbox.

Here are the associated styles:

/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --lightbox: #242424;
}

body {
  margin: 24px 0 48px;
  font: 20px / 28px "Marck Script", cursive;
}

/* IMAGE GRID STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-grid figure {
  margin-bottom: 0;
}

.image-grid img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}

.image-grid a:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}

/* LIGHTBOX STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-modal .modal-content {
  background: var(--lightbox);
}

.lightbox-modal .btn-close {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 1.2rem;
  z-index: 10;
}

.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: center;
}

.lightbox-modal img {
  width: auto;
  max-height: 100vh;
  max-width: 100%;
}

.lightbox-modal .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 36, 36, 0.75);
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}

.lightbox-modal .carousel-control-prev {
  left: 10px;
}

.lightbox-modal .carousel-control-next {
  right: 10px;
}

3. Create the Bootstrap Lightbox

Each time we click on a link, the modal will appear and contain a carousel. By combining the modal and carousel Bootstrap components, we can produce a solid lightbox gallery that will be responsive and support swipe and keyboard navigations.

Here are some things for consideration:

We’ll generate the carousel markup only the very first time someone clicks on a link.
Every other time, there’s no need to recreate it and perform unnecessary actions. At that point, we’ll only need to use the carousel’s to() method for navigating directly to the appropriate slide.
The carousel won’t autoplay and its slides will change with a fade animation.
Each slide will have an optional caption that will be determined by the data-caption attribute of the associated image. If an image doesn’t need a caption on the lightbox, just don’t place such an attribute. Note that we use a custom attribute instead of the default alt one for the image caption. The reason being that the first one is optional and might contain more detailed text compared to the second one that is always good to exist for accessibility reasons. But, you’re free to customize this behavior if you want.
The carousel images won’t contain the d-block and w-100 classes that exist on all Bootstrap code examples.

With all the above in mind, here’s the associated JavaScript code:

const imageGrid = document.querySelector(".image-grid");
const links = imageGrid.querySelectorAll("a");
const imgs = imageGrid.querySelectorAll("img");
const lightboxModal = document.getElementById("lightbox-modal");
const bsModal = new bootstrap.Modal(lightboxModal);
const modalBody = document.querySelector(".modal-body .container-fluid");

for (const link of links) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const currentImg = link.querySelector("img");
    const lightboxCarousel = document.getElementById("lightboxCarousel");
    if (lightboxCarousel) {
      const parentCol = link.parentElement.parentElement;
      const index = [...parentCol.parentElement.children].indexOf(parentCol);
      const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
      bsCarousel.to(index);
    } else {
      createCarousel(currentImg);
    }
    bsModal.show();
  });
}

function createCarousel(img) {
  const markup = `
    <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
      <div class="carousel-inner">
        ${createSlides(img)}
      </div> 
      <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    `;

  modalBody.innerHTML = markup;
}

function createSlides(img) {
  let markup = "";
  const currentImgSrc = img.getAttribute("src");

  for (const img of imgs) {
    const imgSrc = img.getAttribute("src");
    const imgAlt = img.getAttribute("alt");
    const imgCaption = img.getAttribute("data-caption");

    markup += `
    <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
      <img src=${imgSrc} alt=${imgAlt}>
      ${imgCaption ? createCaption(imgCaption) : ""}
    </div>
    `;
  }

  return markup;
}

function createCaption(caption) {
  return `<div class="carousel-caption">
     <p class="m-0">${caption}</p>
    </div>`;
}

Our Responsive Bootstrap Lightbox is Complete!

That concludes another Bootstrap customization, folks! During this short journey, we first built an image grid and then covered the creation of a responsive lightbox gallery. Crucially, we created this lightbox by customizing only slightly existing Bootstrap components. I hope this has inspired you to create even more powerful Bootstrap lightboxes.

For optimal results, be sure to use images with equal dimensions, or else you’ll notice a small jump when the active slide changes.

Once again, here’s what we built:

If you want to go even further and familiarize yourselves with building custom lightboxes, have a look at another recent tutorial.

How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP

George Martsoukos

16 Sep 2021

As always, thanks a lot for reading!

Learn to Customize Bootstrap Yourself

We’ve covered a lot of Bootstrap customizations over the years; take a look yourself!