Bootstrap snippet: Thumbnail image gallery

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: gallery,images



<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>
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; }
Dey-Dey

Thumbnail image gallery

Dey-Dey
  Apr 30th, 00:08
76 Views