Gallery with image lightbox using bootstrap framework

<div class="container" id="gallery">
  <div class="row justify-content-center pb-5 mb-5">
    <div class="col-12 text-center pt-5 mt-5 pb-5">
      <h4 class="headingsmall">Gallery</h4>
      <h2 class="headingbig pb-3">They Got Engaged</h2>
    </div>
    <div class="col-md-12">
      <div class="row"> <a href="img/gallery-one.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-one.jpg" class="img-fluid"> </a> <a href="img/gallery-two.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-two.jpg" class="img-fluid"> </a> <a href="img/gallery-three.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-three.jpg" class="img-fluid"> </a> </div>
      <div class="row"> <a href="img/gallery-four.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-four.jpg" class="img-fluid"> </a> <a href="img/gallery-five.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-five.jpg" class="img-fluid"> </a> <a href="img/gallery-six.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="img/gallery-six.jpg" class="img-fluid"> </a> </div>
    </div>
  </div>
</div>

.headingsmall {
    font-family: 'Great Vibes', cursive;
    color: #521e1e;
}
.headingbig {
    font-family: 'Big Shoulders Display', cursive;
}