Can someone help me figure out how to make Masonry work with my Bootstrap grid columns?
Step 1 - First, I included the Masonry script in my <head> like this :
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
Step 2 - Then, I structured my bootstrap html that I want to apply Masonry on :
<div class="row" id="container"> <!-- container starts -->
<div class="col-lg-3 col-md-6 item"> <!-- 1st column begins -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
</p>
<hr>
<a href="#"><div class="more">Read More</div></a>
<a href="#"><div class="share">Share me</div></a>
</section>
</div>
</div> <!-- 1st column ends -->
<div class="col-lg-3 col-md-6 item"> <!-- 2nd column begins -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
</p>
<hr>
<a href="#"><div class="more">Read More</div></a>
<a href="#"><div class="share">Share me</div></a>
</section>
</div>
</div> <!-- 2nd column ends -->
<div class="col-lg-3 col-md-6 item"> <!-- 3rd column begins -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones)...
Step 3 - Next, I inserted the following javascript code before </body> :
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});Step 4 - Finally, I added the .item class to col-lg-3 col-md-6 as shown in Step 2
However, the columns are not aligning properly as expected. Any advice on what might be causing this issue?