title: Bootstrap 3 with Masonary 3 column format wrapping
body: <p>I am using masonary with Boostrap 3. Instead of 3 columns showing, the 3rd col is wrapping below. </p>
  
  <p>Here is my sample code and a screenshot. Any idea why col-md-3, col-md-5 and col-md-3 are not showing on one line<img src="https://i.stack.imgur.com/Ba0Vw.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div id="mason"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-4 item"&gt;
  
                  &lt;!--some content--&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-md-5 item"&gt;
  
                  &lt;!--some content--&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-3 item"&gt;
  
                  &lt;!--some content--&gt;
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  $(document).ready(function(){
  
    var $container = $('#mason');
  
    $container.masonry({
        itemSelector        : '.item',
        columnWidth         : '.item',
        transitionDuration  : 0
      });
  });
  </code></pre>