title: integrating bootstrap with isotope
body: <p>In the link below I wanna convert a list of <code>DIV</code>s to 3 columns Grid by adding class <code>span4</code> of bootstrap (and masonry layout mode).
  <a href="http://mhesabi.com/test/test.html" rel="nofollow">Demo - twitter bootstrap &amp; isotope</a></p>
  
  <pre><code>$('#grid').on('click', function() {
      $('.item').hide().addClass('span4');
      $('.item:nth-child(3n+1)').css('margin-left', 0); // remove extra margin-lefts
      $('.item').show();
      $('#posts').isotope({
          itemSelector: '.item',
          resizable: false,
          animationEngine: 'best-available'
      });
  });
  $(window).smartresize(function() {
      $('#posts').isotope('reLayout');
  });
  </code></pre>
  
  <p>but as you can see, 3rd column break into the next line. I tried reduce bootstrap <code>span4</code> width but that doesn't make any differences.</p>