title: Jquery Isotope Masonry Layout leaves gap between elements in Bootstrap 3
body: <p>I am new to web development, especially Jquery and Bootstrap.
  I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made <a href="http://imgur.com/frgf3JT,HzoTXvW#0" rel="nofollow">these</a> .gif images that explain the problem better than my explanation below: </p>
  
  <ol>
  <li>The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few iterations. After that I can see a lot of gaps between the elements. If I try to resize the browser window, they rearrange themselves and everything is fine again [Please see image 1 to get a clear picture]. <strong>Note:</strong> This problem seems to exist only with the divs having Images. The text only elements are perfectly arranged.</li>
  <li>I want to the elements to re-arrange themselves if I remove any of them, which doesn't seem to work.</li>
  <li>Also, the elements are of variable heights and can be expanded in few conditions. I want the elements to rearrange themselves even in this case. [Please see image 2 to get a clear picture].</li>
  </ol>
  
  <p><strong>JS</strong></p>
  
  <pre><code>if ($('#container').length) {
          $('#container').isotope({
              itemSelector: '.container-item',
              layoutMode: 'masonry'
          });
      }
  </code></pre>
  
  <p>Please help me solve these problems. Thanks in advance.</p>