Thumbnail image gallery

This bootstrap snippet called "Thumbnail image gallery" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: gallery,images

This is the 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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row gallery shuffle">
    <!-- ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/1.jpg"><img  src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/1.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Mountains</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">10 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart-o"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/2.jpg">
            <img alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/2.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Empire State Pigeon</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">1 hour</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/3.jpg">
            <img src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/3.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Big Lake</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/4.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/4.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Forest</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/5.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/5.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Smile</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart-o"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered" >
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/6.jpg">
            <img alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/6.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Smile</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">1 hour</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered">
        <div class="thumbnail">
            <a href="assets/images/pictures/8.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/8.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Fog</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered">
        <div class="thumbnail">
            <a href="assets/images/pictures/9.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/9.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Beach</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart-o"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/10.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/10.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Pause</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">3 hour</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/11.jpg">
            <img alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/11.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Space</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">3 hour</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered" >
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/13.jpg">
            <img  alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/13.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Shuttle</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">35 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: item in items -->
    <div class="col-sm-6 col-md-3 gallery-item ng-scope shuffle-item filtered">
        <div class="thumbnail">
            <a href="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/14.jpg">
            <img alt="..." src="http://demo.flatlogic.com/sing-wrapbootstrap-2.1.0-plus/angular/assets/images/pictures/14.jpg">
            </a>
            <div class="caption">
                <h5 class="mt-0 mb-xs ng-binding">Sky</h5>
                <ul class="post-links">
                    <li><a href="#" class="ng-binding">2 mins</a>
                    </li>
                    <li><a href="#"><span class="text-danger"><i class="fa fa-heart-o"></i> Like</span></a>
                    </li>
                    <li><a href="#">Details</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>

This is the 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;}


.gallery .thumbnail a {
    display: inline-block;
    overflow: hidden;
    max-width: 100%
}

.gallery .thumbnail a>img {
    -webkit-transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease
}

.gallery .thumbnail:hover a>img {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

.gallery .post-links>li>a {
    display: inline
}

.gallery .post-links>li>a {
    display: inline;
}

.gallery .thumbnail a {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
}

.post-links>li>a {
    text-decoration: none;
    color: #999;
}

.gallery>div {
    max-width: 100%
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.428571429;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out
}

.thumbnail a>img,
.thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto
}

.thumbnail .caption {
    padding: 9px;
    color: #555
}

.mb-xs {
    margin-bottom: 5px;
}
.mt-0, .mt-n-0 {
    margin-top: 0;
}
.h5, h5 {
    font-size: 14px;
}

a.thumbnail.active,
a.thumbnail:focus,
a.thumbnail:hover {
    border-color: #218bc3
}

.post-links {
    margin-bottom: 0;
    font-size: 12px;
    padding-left: 0;
    padding-bottom: 5px;
}

.post-links>li {
    float: left;
    list-style: none;
}

.gallery .post-links>li>a {
    display: inline;
}
.gallery .thumbnail a {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
}
.post-links>li>a {
    text-decoration: none;
    color: #999;
}

.post-links>li+li:before {
    color: #999;
    content: "\25cf";
    padding: 0 8px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 30th 2016, 00:08

Views: 302