<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://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css" integrity="sha512-gk6oCFFexhboh5r/6fov3zqTCA2plJ+uIoUx941tQSFg6TNYahuvh1esZVV0kkK+i5Kl74jPmNJTTaHAovWIhw==" crossorigin="anonymous" /> <div class="container"> <h3 class="wow fadeInLeft text-center mt-5">Light Gallery</h3> <ul id="" class="list-unstyled row lightgallery"> <li class="col-md-3" data-src="https://picsum.photos/500/500"> <img class="img-responsive" src="https://picsum.photos/500/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/501/500"> <img class="img-responsive" src="https://picsum.photos/501/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/502/500"> <img class="img-responsive" src="https://picsum.photos/502/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/503/500"> <img class="img-responsive" src="https://picsum.photos/503/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/504/500"> <img class="img-responsive" src="https://picsum.photos/504/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/505/500"> <img class="img-responsive" src="https://picsum.photos/505/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/506/500"> <img class="img-responsive" src="https://picsum.photos/506/500"> </li> <li class="col-md-3" data-src="https://picsum.photos/507/500"> <img class="img-responsive" src="https://picsum.photos/507/500"> </li> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery-all.min.js" integrity="sha512-Qpvw3WG46QyOqV/YS9BosbxEbMKPREA+QS+iWAKXfvb/87tdfsGGQdT7vqYbQzBOgLvF2I/MHMacA86oURHsCw==" crossorigin="anonymous"></script>

ul.list-unstyled.row.lightgallery li { padding: 5px; } ul.list-unstyled.row.lightgallery { margin-top: 50px; } img{ max-width:100%; }

jQuery(document).ready(function() { jQuery('.lightgallery').lightGallery(); });