"Lightbox and Pinteres with Bootstrap"
Bootstrap 4.1.1 Snippet by anvictor

<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 ----------> <!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet"> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <!------ Include the above in your HEAD tag ----------> </head> <body> <section id="lookbook"> <div class="container h-100"> <div class="row h-100 justify-content-center align-items-center"> <div class="col-md-8" id="child_bg_main"> <div class="row justify-content-self"> <div class="col-md-12"> <div class="my-grid grid" data-masonry='{ "itemSelector": ".item", "columnWidth": auto, "horizontalOrder": true }'> <div class="item"> <div class="demo-gallery"> <ul id="lightgallery"> <li data-src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"> </a> </li> <li data-src="https://i.pinimg.com/originals/86/d7/5c/86d75c395349ee09bcbc94008ae20250.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://i.pinimg.com/originals/86/d7/5c/86d75c395349ee09bcbc94008ae20250.jpg"> </a> </li> <li data-src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg"> </a> </li> <li data-src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM.jpg"> </a> </li> </ul> </div> </div> <div class="item"> <div class="demo-gallery"> <ul id="lightgallery_2"> <li data-src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter "> <a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html>
body { background: #F6F9FC; } * { margin: 0; padding: 0; } /*pinterest css*/ .my-grid { width: 90%; margin: 15px auto; } .item { width: 220px; background: #fff; float: left; margin-right: 15px; margin-bottom: 15px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22); } .item img { width: 100%; } /*pinterest css end*/ .small { font-size: 11px; color: #999; display: block; margin-top: -10px } .cont { text-align: center; } .page-head { padding: 60px 0; text-align: center; } .page-head .lead { font-size: 18px; font-weight: 400; line-height: 1.4; margin-bottom: 50px; margin-top: 0; } .btn { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: normal; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; } .btn-lg { border-radius: 2px; font-size: 18px; line-height: 1.33333; padding: 10px 16px; } .btn-primary:hover { background-color: #fff; color: #152836; } .btn-primary { background-color: #152836; border-color: #0e1a24; color: #ffffff; } .btn-primary { border-color: #eeeeee; color: #eeeeee; transition: color 0.1s ease 0s, background-color 0.15s ease 0s; } .page-head h1 { font-size: 42px; margin: 0 0 20px; color: #FFF; position: relative; display: inline-block; } .page-head h1 .version { bottom: 0; color: #ddd; font-size: 11px; font-style: italic; position: absolute; width: 58px; right: -58px; } .demo-gallery > ul { margin-bottom: 0; padding-left: 15px; } .demo-gallery > ul > li { margin-bottom: 15px; width: 180px; display: inline-block; margin-right: 15px; list-style: outside none none; } .demo-gallery > ul > li a { border: 3px solid #FFF; border-radius: 3px; display: block; overflow: hidden; position: relative; float: left; } .demo-gallery > ul > li a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery > ul > li a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery > ul > li a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery > ul > li a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery > ul > li a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery > ul > li a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .justified-gallery > a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery .justified-gallery > a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery .justified-gallery > a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery .justified-gallery > a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .video .demo-gallery-poster img { height: 48px; margin-left: -24px; margin-top: -24px; opacity: 0.8; width: 48px; } .demo-gallery.dark > ul > li a { border: 3px solid #04070a; }
// lightgallery $(document).ready(function() { $('#lightgallery').lightGallery({ pager: true }); $('#lightgallery_2').lightGallery({ pager: true }); });

Related: See More


Questions / Comments: