<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css"> <link rel="stylesheet" href="gallery-clean.css"> <div class="container gallery-container"> <h1>Bootstrap 3 Gallery</h1> <p class="page-description text-center">Clean Layout With Minimal Styles</p> <div class="tz-gallery"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/park.jpg"> <img src="https://images.pexels.com/photos/914931/pexels-photo-914931.jpeg?cs=srgb&dl=adult-beautiful-caucasian-914931.jpg&fm=jpg" alt="Park"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/bridge.jpg"> <img src="https://images.pexels.com/photos/682004/pexels-photo-682004.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Bridge"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/tunnel.jpg"> <img src="../images/tunnel.jpg" alt="Tuneel"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/coast.jpg"> <img src="../images/coast.jpg" alt="Coast"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/rails.jpg"> <img src="../images/rails.jpg" alt="Rails"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <a class="lightbox" href="../images/traffic.jpg"> <img src="../images/traffic.jpg" alt="Traffic"> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div> </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script> <script> baguetteBox.run('.tz-gallery'); </script> https://drive.google.com/drive/folders/1FJn668uCx20sPBlOkuIBkTrwclgIqoD-