Bootstrap Quick Clearfix Responsive Solution

You found this article because you know and probably have the problem of bootstrap column elements with different heights.

So let’s go into a solution that works for me and works also responsively.


See the Pen Bootstrap Quick Clearfix Responsive Solution by adnan (@kickthemooon) on CodePen.

This works great for this bootstrap columns setup:

col-lg-3 col-md-3 col-sm-4 col-xs-6

In case that you want a different columns setup, play around with :nth-child() parameters:


I hope this was helpful. If you have suggestions or a better solution you are welcome to share it in the comments.

Published by

Adnan Mujkanovic

I am a very curious character and most of all I am into Web development, Economics, Psychology, Philosophy and Logic.

Leave a Reply

Your email address will not be published. Required fields are marked *