7+ Bootstrap Gallery Examples

This post contains a total of 7+ Bootstrap Gallery Examples with Source Code. All these Galleries are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Gallery Examples

1. By Shariff Rudolph

Made by Shariff Rudolph. Simple Bootstrap Gallery. Source

Bootstrap Gallery by Shariff Rudolph
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
  padding-top: 70px;
  padding-bottom: 30px;
  /* Chrome 10-25, safari 5.1-6   */
  background: -webkit-linear-gradient(to right, #002259, #fcfcfc);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #0a0a0a, #fcfcfc);
}

h1 {
  color: #fcfcfc;
  text-align: center;
  margin-bottom: 30px;
}

.image1 {
  background-image: url(https://images.unsplash.com/photo-1466853817435-05b43fe45b39?auto=format&fit=crop&w=989&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image2 {
  background-image: url(https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image3 {
  background-image: url(https://images.unsplash.com/photo-1482146426705-433fc4949dbb?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image4 {
  background-image: url(https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=1140&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image5 {
  background-image: url(https://images.unsplash.com/photo-1497294815431-9365093b7331?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image6 {
  background-image: url(https://images.unsplash.com/photo-1487715433499-93acdc0bd7c3?auto=format&fit=crop&w=1114&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
}

.image {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center center;
}

.thumbnail {
  border-color: black;
}
</style>
</head>
<body>
  <div class="container">
  <h1>Nature At Its Finest</h1>
 <!-- <div class="jumbotron"> -->
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image1"></div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image2"></div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image3"></div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image4"></div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image5"></div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <div class="image image6"></div>
      </div>
    </div>
  </div>
  </div>
</div>
</body>
</html>

2. By Youcantspellit

Made by Youcantspellit. Bootstrap Gallery with Popup Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous" />
</head>
<body>
  <header col-12>
    <h1 class="text-center p-5">My Work</h1>
  </header>
  <main class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12 mb-4 ">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/801x800" alt="" data-toggle="modal"
          data-target="#exampleModalCenter"  />

        <div class="modal fade" id="exampleModalCenter" tabindex="1" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100 figure-img img-fluid rounded" src="https://source.unsplash.com/random/600x600"
                  alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/801x801" alt="" data-toggle="modal"
          data-target="#exampleModalCenter1"/>

        <div class="modal fade" id="exampleModalCenter1" tabindex="2" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100" src="https://source.unsplash.com/random/604x601" alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/802x802" alt="" data-toggle="modal"
          data-target="#exampleModalCenter2" " />

        <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100" src="https://source.unsplash.com/random/600x602" alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/800x801" alt="" data-toggle="modal"
          data-target="#exampleModalCenter"  />

        <div class="modal fade" id="exampleModalCenter" tabindex="1" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100 figure-img img-fluid rounded" src="https://source.unsplash.com/random/600x600"
                  alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/802x801" alt="" data-toggle="modal"
          data-target="#exampleModalCenter1" />

        <div class="modal fade" id="exampleModalCenter1" tabindex="2" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100" src="https://source.unsplash.com/random/600x601" alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
        <img class="h-100 w-100" src="https://source.unsplash.com/random/800x802" alt="" data-toggle="modal"
          data-target="#exampleModalCenter2"/>

        <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" 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">
                <img class="h-100 w-100" src="https://source.unsplash.com/random/603x601" alt="" />
                <div class="carousel-caption">
                  <h1>PROJECT</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>
</html>
 

3. By John Chennells

Made by John Chennells. Bootstrap Gallery with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<style>
.headermessage {
  margin: 16px 0;
  color: black;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.image-block {
    border: 2px solid white ;
    background-color: black;
    padding: 0px;    
    margin: 0px;
    height:300px;
    text-align: center;
    vertical-align: bottom;
}
.image-block > p {
    width: 100%;
    height: 100%;
    font-weight: normal;
    font-size: 2 em;
    padding-top: 150px;
    background-color: rgba(3,3,3,0.0);
    color: rgba(6,6,6,0.0);
}
.image-block:hover > p {
    background-color: rgba(3,3,3,0.5);    
    color: white;    
}
</style>
</head>
<body>
  <div class="container">
    <div class="row text-center">
        <h3 class="headermessage">Responsive Image Tiles</h3>
    </div>
    <div class="row">
        <div class="image-block col-sm-4" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-677.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-8" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-676.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-678.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-679.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-701.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-8" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-705.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(https://www.orangebikes.co.uk/images/2019_bikes/details/327/327_Factory_Details_2019-706.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>            
        </div>
    </div>
</div>
</body>
</html>
 

4. By Fab Rod

Made by Fab Rod. Simple Gallery. Source

Bootstrap Gallery by Fab Rod
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
</head>
<body>
  <!-- Page Content -->
<div class="container">

  <h1 class="display-4 text-center text-lg-left mt-4 mb-0">The Good Programmer!</h1>
  
  <hr class="mb-5">

  <div class="row text-center text-lg-left">

    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
          </a>      
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/8mUEy0ABdNE/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/G9Rfc1qccH4/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aJeH0KcFkuc/400x300" alt="">
          </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" alt="">
          </a>
    </div>
  </div>
</div>
</body>
</html>

5. By Jens

Made by Jens. Bootstrap Gallery with effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<style>
.gallery__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.4s, transform 0.35s;
}
.gallery__item img {
  width: calc(100% + 50px);
  max-width: calc(100% + 50px);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-40px, 0, 0);
}
.gallery__item a {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.gallery__item a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery__item__description-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, visibility 0.2s;
}
.gallery__item__description-layer p {
  transition: 0.2s;
  transform: translateY(1em);
  background-color: #666;
  padding: 10px 20px;
}
.gallery__item:hover .gallery__item__description-layer {
  visibility: visible;
  opacity: 1;
}
.gallery__item:hover .gallery__item__description-layer p {
  transform: translateY(0);
}
@media only screen and (min-width: 992px) {
  .gallery__item {
    height: 200px;
    overflow: hidden;
  }
  .gallery__item:hover img {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.35s, transform 0.35s;
  }
  .gallery__item:hover a:before {
    opacity: 0.3;
  }
}
</style>
</head>
<body>
  <div class="page-content m-5">
  <div class="row">
    <div class="col-12">
      <div class="container gallery">
        <div class="row text-center text-lg-start">
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/640/480" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/640/480" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">My0thTitle as one sentance</p>
            </div>
          </div>
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/640/480" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/480/640" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">MyFirstTitle as one sentance</p>
            </div>
          </div>
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/730/540" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/640/480" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">MySecondTitle as one sentance</p>
            </div>
          </div>
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/640/480" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/480/640" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">MyThirdTitle as one sentance</p>
            </div>
          </div>
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/640/480" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/640/480" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">MyFourthTitle as one sentance</p>
            </div>
          </div>
          <div class="gallery__item col-12 col-lg-3 col-md-6 mb-4 position-relative">
            <a data-glightbox="description:MyTitle" class="glightbox" href="https://picsum.photos/640/480" title="MyTitle">
              <img class="img-fluid" src="https://picsum.photos/480/640" alt="">
            </a>
            <div class="gallery__item__description-layer">
              <p class="m-5">MyFifthTitle as one sentance whicht is large so it will take a long time to read</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

6. By Brandon

Made by Brandon. Simple Lightbox Bootstrap Gallery. Source

Bootstrap Gallery by Brandon
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css'>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="row">
            <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
            </a>
        </div>
        <div class="row">
            <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
            </a>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script>
  $(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
    console.log(this)
  $(this).ekkoLightbox();
});
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
</body>
</html>

7. By Haris Kamal

Made by Haris Kamal. Gallery with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet"> 
  <script src="https://kit.fontawesome.com/b22ced689c.js" crossorigin="anonymous"></script>
<style>
body {
    background-color: #434c50;
    min-height: 100vh;
    font: normal 16px sans-serif;
    padding: 40px 0;
}

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    padding: 30px 50px;
}

.gallery-container h1 {
    text-align: center;
    margin-top: 50px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    margin: 25px auto;
    font-size: 18px;
    color: #999;
}

.tz-gallery {
    padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

img {
  transition: opacity 1s ease-in-out;
}

img:hover {
  opacity: 0.7;
  transition: opacity 1s ease;
  cursor: pointer;
}

.col-sm-4:hover .button {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

.button {
  position: absolute;
  border: 2px solid red;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
  opacity: 0;
  z-index: 0;
  cursor: pointer;
  transition: opacity 1s ease-in-out;
}

h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: black; 
  color: #ffffff;
  font-size: 36px;
  padding: 5px;
  top:50%;left:50%;transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container gallery-container">
    <div class="tz-gallery">
        <div class="row">

            <div class="col-sm-4 col-md-4">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="Bridge">
              <div class="button"><h1>Hello</h1><i class="fas fa-link"></i></div>
            </div>
            <div class="col-sm-4 col-md-4">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="Park">
              <div class="button"><i class="fas fa-link"></i></div>
            </div>
            <div class="col-sm-4 col-md-4">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg" alt="Tunnel">
            </div>
            <div class="col-sm-4 col-md-4">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg" alt="Traffic">
             </div>
            <div class="col-sm-4 col-md-4">
                <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg" alt="Coast">
            </div> 
            <div class="col-sm-4 col-md-4">
                    <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg" alt="Rails">
            </div>

        </div>

    </div>

</div>
</body>
</html>

8. By Samantha

Made by Samantha. Bootstrap Gallery Lightbox. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
.modal button.close {
  right: 0;
  outline: 0;
}
  
#gallery-lightbox img {
  height: 350px;
  object-fit: cover;
  cursor: pointer;
}

#gallery-lightbox img:hover {
  opacity: 0.9;
  transition: 0.5s ease-out;
}
</style>
</head>
<body>
  <div id="gallery-lightbox" class="row" data-toggle="modal" data-target="#exampleModal">
  <div class="col-6 col-md-4 col-lg-3 p-0">
    <img class="w-100" src="https://images.unsplash.com/photo-1546853020-ca4909aef454?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide" data-target="#carouselExample" data-slide-to="0">
  </div>
  <div class="col-6 col-md-4 col-lg-3 p-0">
    <img class="w-100" src="https://images.unsplash.com/photo-1546534505-d534e27ecb35?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide" data-target="#carouselExample" data-slide-to="1">
  </div>
  <div class="col-6 col-md-4 col-lg-3 p-0">
    <img class="w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide" data-target="#carouselExample" data-slide-to="2">
  </div>
  <div class="col-6 col-md-4 col-lg-3 p-0">
    <img class="w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide" data-target="#carouselExample" data-slide-to="3">
  </div>
</div>


<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close m-0 p-3 text-white position-absolute right-0" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content bg-transparent">
      <div class="modal-body p-0">
        <div id="carouselExample" class="carousel slide carousel-fade" data-ride="false">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1546853020-ca4909aef454?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1546534505-d534e27ecb35?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Third slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Fourth slide">
            </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>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</body>
</html>