Bootstrap Clearfixer

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>

etc. This results in:

The guys at Tutorialrepulic.com 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="//code.jquery.com/jquery-2.1.3.min.js"></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:

<script>
	$(<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           
	});
</script>

Clearfixer for Bootstrap columns

a jQuery plugin that automatically adds clearfix divs

How to use this plugin

1. Link the files you need

2. Call the plugin