Bootstrap snippet: gallery list multiples positions

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: images,gallery



<div class="container"> <div class="row row-broken"> <div class="col-sm-12"> <div class="row gallery-list"> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-1.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 1" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-1.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-2.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 2" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-2.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-3.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 3" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-3.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-4.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 4" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-4.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-5.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 5" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-5.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-6.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 6" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-6.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-7.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 7" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-7.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-8.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 8" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-8.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-9.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 9" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-9.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-10.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 10" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-10.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-11.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 11" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-11.png" class="img-responsive"> </a> <a href="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-12.png" data-toggle="lightbox" data-gallery="multiimages" data-title="Title 12" class="col-sm-3"> <img src="http://91.234.35.26/iwiki-admin/v1.2.1/admin/img/images/gallery/1200-12.png" class="img-responsive"> </a> </div> </div> </div> </div>
body{margin-top:20px;} .gallery-list, .gallery-list a { padding-left: 10px; padding-right: 10px; } @media(max-width: 767px){ .gallery-list { padding-left: 20px; padding-right: 20px; } }
Dey-Dey

gallery list multiples positions

Dey-Dey
  Apr 30th, 01:09
28 Views