Responsive Bootstrap 3 Masonry Image Gallery Example

Responsive Bootstrap 3 Masonry Image Gallery:

Do you love pinterest ? Need similar template for your image galleries ?

Here we have shared masonry image gallery with responsive design using bootstrap 3 and isotope jQuery plugins.

masonry with bootstrap 3



1. jQuery plugin

2. Bootstrap 3 JS and CSS

3. jQuery isotope plugin





Required Imports:

<pre><!-- jQuery js library -->
<script src="//" type="text/javascript"></script>

<!-- Bootstrap js library -->
<script src="" type="text/javascript"></script>

<!-- isotope js library -->
<script src="" type="text/javascript"></script></pre>


Custom CSS Styles:

<pre><!-- custom css style -->
<style type="text/css">
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;



HTML code to display Images:



  • Full source codes shared above is the only required file here, you can copy paste it and change only the image names.
  • If you do not want to change the image names also, then download the zip file and directly check the output.

495 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *