Bootstrap snippet: gallery with small images

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,image



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <!-- begin col-9 --> <div class="col-md-9"> <!-- begin gallery-list --> <ul class="gallery-list"> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/1/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Quisque a eleifend est, quis accumsan metus.</h5> <small class="text-muted">24/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/2/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Nunc posuere augue vitae mi egestas, in suscipit risus aliquet.</h5> <small class="text-muted">24/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/3/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Mauris erat odio, ullamcorper non lacus ac, pulvinar aliquet eros.</h5> <small class="text-muted">25/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/4/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Maecenas ornare, purus nec egestas dapibus, sem erat dapibus tellus.</h5> <small class="text-muted">25/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/5/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Sed nec justo condimentum, gravida massa id, elementum mauris.</h5> <small class="text-muted">27/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/6/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Donec eget velit quis libero congue blandit.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/7/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Fusce suscipit suscipit nisi eu tempus.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/1/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Cras interdum nisl ut lacus accumsan varius.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/2/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Praesent quis porta sapien.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/3/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Duis pulvinar est ac sem tincidunt dictum.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/4/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Praesent tempor iaculis dolor.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/5/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Pellentesque feugiat varius magna at rutrum.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/6/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Fusce dictum nulla in nunc finibus.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/7/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Duis pulvinar est ac sem tincidunt dictum.</h5> <small class="text-muted">28/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/sports/8/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Phasellus consequat tortor vitae magna iaculis.</h5> <small class="text-muted">29/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/1/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Praesent pretium tempor ante sit amet finibus.</h5> <small class="text-muted">29/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/2/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Vestibulum egestas placerat purus.</h5> <small class="text-muted">30/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/3/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Aliquam consequat blandit purus quis sodales.</h5> <small class="text-muted">31/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/4/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Lorem ipsum dolor sit amet.</h5> <small class="text-muted">31/08/2015</small> </div> </div> </li> <li> <div class="image-container"> <div class="image"> <img src="http://lorempixel.com/200/200/nature/5/" alt=""> </div> <div class="btn-list"> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a> <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a> </div> <div class="info"> <h5>Suspendisse varius est dui.</h5> <small class="text-muted">31/08/2015</small> </div> </div> </li> </ul> <!-- end gallery-list --> </div> <!-- end col-9 --> <!-- begin col-3 --> <div class="col-md-3"> <!-- begin panel --> <div class="panel p-20"> <h5 class="m-t-0">Search Images</h5> <form class="form-input-flat"> <div class="input-group m-b-15"> <input type="text" class="form-control" placeholder="Enter keywords..."> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="horizontal-divider m-0 m-b-15"></div> <h5 class="m-t-0">Filter By Category</h5> <form class="form-input-flat"> <div class="form-group m-b-15"> <select class="form-control"> <option value="">All Category</option> <option value="">Nature</option> <option value="">Car</option> <option value="">People</option> <option value="">Food</option> </select> </div> </form> <div class="horizontal-divider m-0 m-b-15"></div> <h5 class="m-t-0">Tags</h5> <ul class="tag-list m-b-10"> <li><a href="#">Forest</a></li> <li><a href="#">Animals</a></li> <li><a href="#">People</a></li> <li><a href="#">Technology</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Food</a></li> <li><a href="#">Media</a></li> <li><a href="#">Building</a></li> <li><a href="#">Camera</a></li> <li><a href="#">Insect</a></li> <li><a href="#">Food &amp; Drink</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Objects</a></li> <li><a href="#">Car</a></li> </ul> <div class="horizontal-divider m-0 m-b-15"></div> <div class="text-center"> <a href="#" class="btn btn-rounded btn-default btn-sm"><i class="fa fa-plus"></i> Upload New Images</a> </div> </div> <!-- end panel --> </div> <!-- end col-3 --> </div> </div>
body{margin-top:20px; background:#eee; } .p-20, .wrapper { padding: 20px!important; } .btn.btn-white { color: #30373e; background: #fff; -webkit-box-shadow: 0 1px #b1b5b8; box-shadow: 0 1px #b1b5b8; } .gallery-list { list-style-type: none; margin: -5px -5px 15px; padding: 0 } .gallery-list>li { float: left; width: 20%; padding: 5px } .gallery-list>li .image-container { border-radius: 5px; background: #fff; position: relative; -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, .07); box-shadow: 0 2px 0 rgba(0, 0, 0, .07) } .gallery-list>li .image { padding-top: 60%; position: relative; overflow: hidden; border-radius: 5px 5px 0 0 } .gallery-list>li .image img { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: 1000 } .gallery-list>li .btn-list { position: absolute; left: 10px; top: 10px; right: 10px; z-index: 1020 } .gallery-list>li .info { padding: 8px 10px } .gallery-list>li .info * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .gallery-list>li .info h5 { margin: 0; font-size: 12px } @media (max-width:991px) { .gallery-list>li { width: 33.33% } } @media (max-width:480px) { .gallery-list>li { width: 50% } } .tag-list { list-style-type: none; margin: 0; padding: 0 } .tag-list>li { float: left; margin-right: 5px; margin-bottom: 5px } .tag-list>li a, .tag-list>li span { border: 2px solid #ebeced; border-radius: 40px; color: #30373e; font-size: 11px; padding: 2px 8px; display: block } .tag-list>li.active a, .tag-list>li.active span { color: #30373e; border-color: #30373e }
Dey-Dey

gallery with small images

Dey-Dey
  May 10th, 12:53
1.9K Views