Bootstrap gaps between columns

Question

See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the produ

Answer 1

Make sure you're using the latest version of Bootstrap (currently v3.2.0).

The newly added responsive utilities will help you to accomplish this, as described in the documentation here.

Insert this div between the "rows":

Explanation:

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

So, in your case, you need to have a clearfix added for each of the lg/md breakpoints after every third element; for the sm elements after every fourth element; and for every xs element after every second element. Here's a Bootply example of how that would look.

Please note that as pointed out by @sean-ryan, you should be using the .row class instead of the old row-fluid, and you should not be wrapping the entire column in an anchor tag. I've corrected that below (and adjusted your css in the Bootply accordingly).

    

        

            
                
                
Cowboysbag 'The Bag' Black
                
€ 129,95
            
        
        

            
                
                
Another Dynamite bag with a much longer title that will need to wrap
                
€ 129,95
            
        

        


        

            
                
                
A hot handbag
                
€ 129,95
            
        

        


        

            
                
                
I think I like the Green bag most
                
€ 129,95
            
        

        


        

            
                
                
I guess Tassen is Dutch for bag
                
€ 129,95
            
        
        

            
                
                
In German, bag is Tasche oder Handtasche (handbag)
                
€ 129,95
            
        

        


        

            
                
                
This is another handbag
                
€ 129,95
            
        
        

            
                
                
Yet another cool bag
                
€ 129,95
            
        

        


        

            
                
                
Cowboysbag 'The Bag' Black
                
€ 129,95
            
        
    
 
 

If all of this is just too much markup for you, you can use jQuery instead to make the adjustments automatically as follows:

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});