Isotope/Masonry type plugin that works with Bootstrap 3 and different grid widths

grid, jquery, jquery-isotope, sorting, twitter-bootstrap

Solution

So I managed to get it working (mostly) to how I wanted it. I had to remove the bootstrap grid inside the row in the end. It's far from perfect but it's a whole lot better than before. Hope this helps someone.

 <div class="row">
    <div class="iso">        
        <div class="item large">
            <div>
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>                 
        </div>
        <div class="item">
            <div>
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>                            
        </div>
        <div class="item">
            <div>
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>                                 
        </div>
        <div class="item">                                
            <div>
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>                              
        </div>
    </div>
</div>

CSS

.item { width: 33%; margin-bottom: 15px; padding: 15px; box-sizing: border-box; }   
.item.large{ width: 66%; }
.item > div  { color: #fff; background-color: #000; padding: 20px; }

jQuery (Using isotope)

var $container = $('.iso');
$container.imagesLoaded( function(){
    $container.isotope({   
        masonry: {
            gutter: 0,
            itemSelector: '.item',
            columnWidth: 3
        },
        filter: '*'
    });
});

I then used a media query for when I got down to mobile and set both .item and .item.large to width: 100%.

Fiddle: http://jsfiddle.net/JR3gu/3/

Problem

I'm having a hard time getting my Isotope plugin to work correctly. I've tried lots of different things but I've now gone right back to the beginning. I'm using bootstrap 3 and I'd like a sortable grid based news section (like pinterest) - the difference is I want two different types of grid widths. I have my default grid width which would be 'col-sm-4' (equivalent of 33.33333% width) and then a 'featured' grid width 'col-sm-8'. The columns will also be varying heights and I'd like them to stack underneath each other (like pinterest). I thought this would be simple enough but everything I've tried either works but then leaves a BIG vertical gap under the featured grid size or breaks it completely. I was wondering if anyone else has had to do anything similar and if they managed to get it working as it should. So this is isotope working if all my grid items are the same width (works fine): http://jsfiddle.net/JR3gu/ This is what happens when I add my 'featured' col-sm-8 grid (breaks): http://jsfiddle.net/JR3gu/1/ I've tried using this plugin (sloppyMasonry) but didn't have much luck with that either: https://github.com/cubica/isotope-sloppy-masonry My code: ``` <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row iso"> <div class="col-sm-8 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <div class="col-sm-4 iso-item" style="padding-bottom: 20px;"> <div class="item"> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> </div> </div> </div> </div> ``` jQuery ``` $(document).ready(function() { var $container = $('.iso'); $container.imagesLoaded( function(){ $container.isotope({ resizable: true, layoutMode : 'masonry', itemSelector : '.iso-item' }); }); }); ```

Original source