Bootstrap snippet Gallery of images

<div class="container"> <div class="portfolioContainer"> <div class="col-sm-6 col-lg-3 col-md-4 webdesign illustrator"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-1"> <img src="https://lorempixel.com/400/280/nature/1/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign illustrator photography"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-2"> <img src="https://lorempixel.com/400/280/nature/2/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 webdesign graphicdesign"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-3"> <img src="https://lorempixel.com/400/280/nature/3/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 illustrator photography"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-4"> <img src="https://lorempixel.com/400/280/nature/4/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-5"> <img src="https://lorempixel.com/400/280/nature/5/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 webdesign photography"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-6"> <img src="https://lorempixel.com/400/280/nature/6/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 illustrator photography graphicdesign"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-7"> <img src="https://lorempixel.com/400/280/nature/7/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography webdesign"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-8"> <img src="https://lorempixel.com/400/280/nature/1/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 webdesign illustrator"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-9"> <img src="https://lorempixel.com/400/280/nature/2/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 photography graphicdesign"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-10"> <img src="https://lorempixel.com/400/280/nature/5/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-11"> <img src="https://lorempixel.com/400/280/nature/6/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> <div class="col-sm-6 col-lg-3 col-md-4 webdesign graphicdesign illustrator"> <div class="gal-detail thumb"> <a href="#" class="image-popup" title="Screenshot-12"> <img src="https://lorempixel.com/400/280/nature/3/" class="thumb-img" alt="work-thumbnail"> </a> <h4 class="text-center">Gallary Image</h4> <div class="ga-border"></div> <p class="text-muted text-center"><small>Photography</small></p> </div> </div> </div> </div>

body{margin-top:20px; background:#eee; } /* =========== Gallery =============*/ .portfolioFilter a { -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-out; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color: #333333; padding: 5px 10px; display: inline-block; transition: all 0.3s ease-out; } .portfolioFilter a:hover { background-color: #228bdf; color: #ffffff; } .portfolioFilter a.current { background-color: #228bdf; color: #ffffff; } .thumb { background-color: #ffffff; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); margin-top: 30px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 100%; } .thumb-img { border-radius: 2px; overflow: hidden; width: 100%; } .gal-detail h4 { margin: 16px auto 10px auto; width: 80%; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; } .gal-detail .ga-border { height: 3px; width: 40px; background-color: #228bdf; margin: 10px auto; }