gallery list multiples positions

This bootstrap snippet called "gallery list multiples positions" 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: images,gallery

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

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

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-list, .gallery-list a {
  padding-left: 10px;
  padding-right: 10px;
}

@media(max-width: 767px){
  .gallery-list {
    padding-left: 20px;
    padding-right: 20px;
  }
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 30th 2016, 01:09

Views: 147