{"id":71122,"date":"2021-10-26T02:25:00","date_gmt":"2021-10-25T15:25:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=39337"},"modified":"2025-11-11T17:48:23","modified_gmt":"2025-11-11T06:48:23","slug":"how-to-build-a-responsive-bootstrap-lightbox-gallery","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/how-to-build-a-responsive-bootstrap-lightbox-gallery","title":{"rendered":"How to Build a Responsive Bootstrap Lightbox Gallery"},"content":{"rendered":"\n

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<\/a>. 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.<\/p>\n\n\n\n

Although not required, good knowledge of Bootstrap will be beneficial to follow along with this tutorial.<\/p>\n\n\n\n

Our Responsive Bootstrap Lightbox Extension<\/h2>\n\n\n\n

Without further ado, here\u2019s what we\u2019ll be creating (click an image to open the lightbox):<\/p>\n\n\n\n

\"lightbox<\/a><\/figure>\n\n\n\n

Get Thousands of Bootstrap Templates on Envato Elements<\/h2>\n\n\n\n

Check out Envato Elements for a huge collection of Bootstrap templates<\/a>, website designs, and Bootstrap-based WordPress themes\u2014unlimited downloads with your monthly subscription!<\/p>\n\n\n\n

\"envato<\/a>
Premium Bootstrap templates<\/a> with your Envato Elements subscription<\/figcaption><\/figure>\n\n\n\n

1. Define the HTML Markup<\/h2>\n\n\n\n

Create an Image Grid<\/h3>\n\n\n\n

To begin with, we\u2019ll create an image grid to reveal the beauty of Ireland through some Unsplash<\/a> images. To do this, we\u2019ll take advantage of Bootstrap\u2019s grid system<\/a>.<\/p>\n\n\n\n

All images should have the same dimensions. In our case, we\u2019ll work with big ones (1920px x 1280px). These will appear as soon as the lightbox opens.<\/p>\n\n\n\n

\"image<\/figure>\n\n\n\n

Here\u2019s the required structure for our grid:<\/p>\n\n\n\n

<section class=\"image-grid\">\n  <div class=\"container-xxl\">\n    <div class=\"row gy-4\">\n      <div class=\"col-12 col-sm-6 col-md-4\">\n        <figure>\n          <a class=\"d-block\" href=\"\">\n            <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\">\n          <\/a>\n        <\/figure>\n      <\/div>\n      <div class=\"col-12 col-sm-6 col-md-4\">\n        <figure>\n          <a class=\"d-block\" href=\"\">\n            <img width=\"1920\" height=\"1280\" src=\"ireland2.jpg\" class=\"img-fluid\" alt=\"Fintown, Ireland\" data-caption=\"Fintown, Ireland\">\n          <\/a>\n        <\/figure>\n      <\/div>\n      <!-- more columns here -->\n    <\/div>\n  <\/div>\n<\/section><\/code><\/pre>\n\n\n\n
Build the Modal Skeleton<\/h3>\n\n\n\n
We\u2019ll continue by specifying a part of the markup needed for registering a full-screen Bootstrap modal<\/a>. Its main content will be created dynamically and hold a Bootstrap carousel.<\/p>\n\n\n\n
<div class=\"modal lightbox-modal\" tabindex=\"-1\">\n  <div class=\"modal-dialog modal-fullscreen\">\n    <div class=\"modal-content\">\n      <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n      <div class=\"modal-body\">\n        <div class=\"container-fluid p-0\">\n          <!-- JS content here -->\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
2. Add Some Styles<\/h2>\n\n\n\n
Coming up next, we\u2019ll add some styles for our project.<\/p>\n\n\n\n
Most importantly:<\/p>\n\n\n\n