Clearfixer for Bootstrap columns

a jQuery plugin that automatically adds clearfix divs

When using columns in Bootstrap, you need to clear to prevent them from mis-aligning.

Download from Github

When you are using columns in Bootstrap, you need to clear to prevent them from mis-aligning. And after how many columns you clear depends on your responsive width.

For instance, if you have a number of thumbnails, you might want two next to each other on a smartphone, four on a tablet and six on a desktop. You do this by giving them Bootstrap's grid classes:

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">

This ensures you have the right number of thumbnails next to each other on each device. But... if one thumbnail is higher than the other, the columns mis-align:

Easily set your columns

To prevent this, you insert a clearfix div that is only visible at the right window size:

<div class="clearfix visible-xs-block"></div>


<div class="clearfix visible-xs-block"></div>

etc. This results in:

The guys at explain it quite well.

How to use this plugin

1. Link the files you need

Include the jQuery script at the bottom of your page, e.g. through a CDN:

<script src="//"></script>

Then include the minimized version of the script:

<script src="[path to your script]/jquery.bootstrap_clearfixer.min.js"></script>

Change [path to your script] to where it resides, eg "js".

2. Call the plugin

Then initialize the plugin, telling it in which element it needs to run:

	$(<containing element here, e.g. "#photos">).bootstrapClearfixer({
		// clear columns after every Xth columns. Fill in the
		// column numbers below for each bootstrap size
			lg: 6,
			md: 6,
			sm: 4,
			xs: 3           

	// a second container:
	$(<containing element here, e.g. "#photos2">).bootstrapClearfixer({
			lg: 4,
			md: 4,
			sm: 3,
			xs: 2           

This versatile jQuery plugin I made because including clearfixes by hand is accident-prone and difficult in CMS environments. It is project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.

Please drop in on my portfolio site!