Fixing Bootstrap’s irregular column stacking

Bootstrap column stackingI had a problem when displaying an unspecified number of logos on a site I was building using Bootstrap. The issue was on a smaller responsive screen I couldn’t use rows to clear the float and because some logos were taller than others sometimes there would be a “stair” effect going on. See in row two there are only two logos? This is caused because the first logo in row one is taller than the other two in that row.

The Bootstrap Fix

I thought for a minute and decided to add a <div> tag to every 3rd element on small screens and every 4th element on larger screens with the Bootstrap .clearfix class. I then added .visable-xs and .visable-sm, .visable-md and .visable-lg on the respective <div> tags to make them appear and disappear depending on the media query.

Check out the JSFiddle

SHould you have another solution or a way to make this solution better please leave a comment below.

Leave a Reply