Awesome CSS snippet for Bootstrap 3 column clearing

In Bootstrap, 12 columns fit in one div.row (by default at least), and If you put more of them in there, the excessive ones end up in a new row. Now unless all of the columns are the same height, your layout can suddenly break this way.

To address this issue (a quite common one – think e-shop product grid), Bootstrap provides special clearfix classes we should use in every problematic point, for every layout variant. I always hated this solution, as it pollutes the markup and forces me to waste time thinking about the stuff that someone should’ve fixed once for all.

Well, someone did. To never worry about clearing columns again, read the article and get the CSS at:

It’s simple, beautiful and it works!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s