Bootstrap Snippet gallery with lightbox bootstrap 4 using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://bootstraplily.com/demo/gallery-ui/gallery-one/css/light-box.css">
<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="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-one.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-one.jpg" class="img-fluid"> </a> <a href="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-two.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-two.jpg" class="img-fluid"> </a> <a href="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-three.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-three.jpg" class="img-fluid"> </a> </div>
      <div class="row"> <a href="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-four.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-four.jpg" class="img-fluid"> </a> <a href="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-five.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-five.jpg" class="img-fluid"> </a> <a href="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-six.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 mb-4"> <img src="https://bootstraplily.com/demo/gallery-ui/gallery-one/img/gallery-six.jpg" class="img-fluid"> </a> </div>
    </div>
  </div>
</div>
<div class="container text-center small text-muted mt-4 mb-5">
    Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a>
</div>
<script src="https://bootstraplily.com/demo/gallery-ui/gallery-one/js/ekko-lightbox.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox();
            });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"gallery with lightbox bootstrap 4"
Bootstrap 4.1.1 Snippet by bootstraplily.com

Related: See More

Questions / Comments:

"gallery with lightbox bootstrap 4" Bootstrap 4.1.1 Snippet by bootstraplily.com

Related: See More

Questions / Comments:

"gallery with lightbox bootstrap 4"
Bootstrap 4.1.1 Snippet by bootstraplily.com