title: Masonry doesn't work with Bootstrap 3
body: <p>My problem is that I can't make Masonry work with my Bootstrap columns (grid).</p>
  
  <p><strong>Step 1 -</strong> I called for the Masonry in my <code>&lt;head&gt;</code> like so :</p>
  
  <pre><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Step 2 -</strong> I wrote my bootstrap html (this is the part I want to apply Masonry on) :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" id="container"&gt; &lt;!-- container begins --&gt;
  
              &lt;div class="col-lg-3 col-md-6  item"&gt; &lt;!-- 1st column starts --&gt;
                       
                        &lt;div class="well clearfix"&gt;
  
                  &lt;section&gt;        
                               &lt;img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;"&gt;              
                                
                               &lt;h2 id="post"&gt;This is my wordpress post title&lt;/h2&gt;
                         
                          &lt;div class="post-label"&gt;
                               &lt;span class="label label-default"&gt;Aymen&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Web Design&lt;/span&gt;
                               &lt;span class="label label-default"&gt;12-10-2014&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Comments 24&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;hr&gt;
                                &lt;p id="post"&gt;
                          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.
                                &lt;/p&gt;
                      &lt;hr&gt;
                               &lt;a href="#"&gt;&lt;div class="more"&gt;Read More&lt;/div&gt;&lt;/a&gt;
                               &lt;a href="#"&gt;&lt;div class="share"&gt;Share me&lt;/div&gt;&lt;/a&gt;
                  &lt;/section&gt;
                        &lt;/div&gt; 
              &lt;/div&gt; &lt;!-- 1st column ends --&gt;
  
  
              &lt;div class="col-lg-3 col-md-6  item"&gt; &lt;!-- 2nd column starts --&gt;
                       
                        &lt;div class="well clearfix"&gt;
  
                  &lt;section&gt;        
                               &lt;img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;"&gt;              
                                
                               &lt;h2 id="post"&gt;This is my wordpress post title&lt;/h2&gt;
                         
                          &lt;div class="post-label"&gt;
                               &lt;span class="label label-default"&gt;Aymen&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Web Design&lt;/span&gt;
                               &lt;span class="label label-default"&gt;12-10-2014&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Comments 24&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;hr&gt;
                                &lt;p id="post"&gt;
                          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.
                                &lt;/p&gt;
                      &lt;hr&gt;
                               &lt;a href="#"&gt;&lt;div class="more"&gt;Read More&lt;/div&gt;&lt;/a&gt;
                               &lt;a href="#"&gt;&lt;div class="share"&gt;Share me&lt;/div&gt;&lt;/a&gt;
                  &lt;/section&gt;
                        &lt;/div&gt; 
              &lt;/div&gt; &lt;!-- 2nd column ends --&gt;
  
                          &lt;div class="col-lg-3 col-md-6  item"&gt; &lt;!-- 2nd column starts --&gt;
                       
                        &lt;div class="well clearfix"&gt;
  
                  &lt;section&gt;        
                               &lt;img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;"&gt;              
                                
                               &lt;h2 id="post"&gt;This is my wordpress post title&lt;/h2&gt;
                         
                          &lt;div class="post-label"&gt;
                               &lt;span class="label label-default"&gt;Aymen&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Web Design&lt;/span&gt;
                               &lt;span class="label label-default"&gt;12-10-2014&lt;/span&gt;
                               &lt;span class="label label-default"&gt;Comments 24&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;hr&gt;
                                &lt;p id="post"&gt;
                          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.
                                &lt;/p&gt;
                      &lt;hr&gt;
                               &lt;a href="#"&gt;&lt;div class="more"&gt;Read More&lt;/div&gt;&lt;/a&gt;
                               &lt;a href="#"&gt;&lt;div class="share"&gt;Share me&lt;/div&gt;&lt;/a&gt;
                  &lt;/section&gt;
                        &lt;/div&gt; 
              &lt;/div&gt; &lt;!-- 2nd column ends --&gt;
  
          &lt;/div&gt; &lt;!-- container ends --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Step 3</strong> - I added the javascript code above <code>&lt;/body&gt;</code> :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container = document.querySelector('#container');
  var msnry = new Masonry( container, {
    // options
    columnWidth: 200,
    itemSelector: '.item'
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Step 4</strong> I added .item class to <code>col-lg-3 col-md-6</code> as yo ucan see in <strong>Step 1</strong></p>
  
  <p>But nothing happens, the columns don't take their right places as they should.</p>