HTML code for this bootstrap snippet
Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab
<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>CSS code for this bootstrap snippet
Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview
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;
}
Information about this bootstrap snippet
Creator: Dey Dey
Bootstrap version: 3.3.6
Created: Apr 30th 2016, 00:17
Views: 4.7K