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

 

Requirements:

1. jQuery plugin

2. Bootstrap 3 JS and CSS

3. jQuery isotope plugin

 

 

demo
download

 

Required Imports:

<pre><!-- jQuery js library -->
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

<!-- Bootstrap js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

<!-- isotope js library -->
<script src="https://cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js" 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;
-webkit-column-gap:1em;

}
</style></pre>

 

HTML code to display Images:

 

Note:

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