Bootstrap Lightbox Image Gallery Template | Image Gallery

Discover a free, fully customizable responsive lightbox image gallery template. This image gallery snippet is perfect for photographers and designers, offering seamless responsiveness and an interactive lightbox for full-screen photo viewing.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<section id="fws_gallery_4">
  <div class="fws_gallery">
      <div class="container">
          <div class="heading">
              <h2 class="text-center">Lightbox Gallery</h2>
          </div>
          <div class="row m-o">
              <div class="col-lg-4 col-md-4 col-sm-12 item p-0">
                <div class="content">
                  <a href="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                      <img class="img-fluid" src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
                </div>
                  <div class="content">
                    <a href="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                      <img class="img-fluid" src="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                    </a>
                  </div>
              </div>
              <div class="col-lg-8 col-md-8 col-sm-6 item p-0">
                <div class="content">
                  <a href="https://images.pexels.com/photos/1667088/pexels-photo-1667088.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                      <img class="img-fluid" src="https://images.pexels.com/photos/1667088/pexels-photo-1667088.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item p-0">
                <div class="content">
                  <a href="https://images.pexels.com/photos/3270223/pexels-photo-3270223.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/3270223/pexels-photo-3270223.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item p-0">
                <div class="content">
                  <a href="https://images.pexels.com/photos/4041392/pexels-photo-4041392.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/4041392/pexels-photo-4041392.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item p-0">
                <div class="content">
                  <a href="https://images.pexels.com/photos/397978/pexels-photo-397978.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/397978/pexels-photo-397978.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
                </div>
              </div>
          </div>
      </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>

CSS

JS

Width:

Height:

Looking for a sleek and modern image gallery template for your website? This responsive lightbox image gallery is a perfect solution. With smooth transitions, high-resolution visuals, and a fully responsive design, users can enjoy an interactive experience on any device. The image gallery snippet is easy to implement and comes as a free image gallery template for web developers, photographers, and creative designers.

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Responsive Bootstrap Pricing Snippet | Website Pricing Plan Section | Flexible Plans

Responsive Bootstrap Pricing Snippet | Website Pricing Plan Section | Flexible Plans

20-Sep-2024 Updated : 20-Sep-2024

Elegant Heading Design with Unique Divider for Modern Web Pages

Elegant Heading Design with Unique Divider for Modern Web Pages

13-Sep-2024 Updated : 13-Sep-2024

Stylish and Functional Breadcrumb Navigation with HTML and CSS

Stylish and Functional Breadcrumb Navigation with HTML and CSS

14-Aug-2024 Updated : 24-Aug-2024

Modern Breadcrumb Navigation with Icons and Responsive Design

Modern Breadcrumb Navigation with Icons and Responsive Design

14-Aug-2024 Updated : 24-Aug-2024

Snippets Categories