Auto clearfix for Bootstrap 3's cols. (From within a loop)

bootstrap-3-clearfix.md

Auto-insert Bootstrap 3's clearfix for differnt viewport sizes.

<?php 
/**
 * Bootstrap auto clearfix from inside loops.
 * Put this function at the start of the loop before other bootstrap cols are called.
 *
 * @param       int   $i The count from within the loop where the function is called. Starting with 0.
 * @param       array $args ['xs'=> 12, 'sm' => 6, 'md' => 4, 'lg' => 3]
 * @param       int $grid
 * @param       string $element
 *
 * @return      string HTML
 * @author      Oran Blackwell
 * @version     1.0.1
 *
 * @since       Bootstrap 3.0
 * @note        Currently only works on equally distributed columns (per group) eg. .col-xs-6(*n) or .col-sm-3(*n)
 * @todo        If array is passed for $xs, $sm... then assume non-equal widths and handle accordingly.
 * @todo        Pass multiple classes to a single div.
 * @todo        Add ability to include "+" to have a mobile first approach. ie "xs-12" & "sm-6+" will also apply for "md-6" & "lg-6"
 */
function bootstrap_clearfix( $i, $args = array(), $element = 'div',  $grid = 12 ) {
	$performFor = array();
	$clearfix   = '';

	if ( isset( $args['xs'] ) && is_int( $args['xs'] ) ) {
		$performFor[] = 'xs';
	}
	if ( isset( $args['sm'] ) && is_int( $args['sm'] ) ) {
		$performFor[] = 'sm';
	}
	if ( isset( $args['md'] ) && is_int( $args['md'] ) ) {
		$performFor[] = 'md';
	}
	if ( isset( $args['lg'] ) && is_int( $args['lg'] ) ) {
		$performFor[] = 'lg';
	}

	foreach ( $performFor as $v ) {
		$modulus = $grid / $args[ $v ];

		// not finished
		//if($element=='string'){
		//	$clearfix .= ( $i > 0 && $i % $modulus == 0 ? ' clearfix-' . $v  : '' );
		//}  
		//else
		$clearfix .= ( $i > 0 && $i % $modulus == 0 ? ' <'.$element.' class="clearfix visible-' . $v . '"></'.$element.'>' : '' );
	}

	return $clearfix;
}
?>

Example Usage (Wordpress)

<?php
$bs_clearfix = 0;
while( have_posts() ) : the_post();
	$clearfix = bootstrap_clearfix( $bs_clearfix, array( 'xs' => 6, 'sm' => 4, 'md' => 4, 'lg' => 4 ) );
	echo $clearfix;
	$bs_clearfix ++;
	?>
	<div class="col-sm-4 col-xs-6">
		<article>
		<!-- content -->
		</article>
	</div><!-- col -->
<?php
endwhile;
?>

Output from above example

<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->
<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->
<div class="clearfix visible-xs"></div>
<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->
<div class="clearfix visible-sm"></div>
<div class="clearfix visible-md"></div>
<div class="clearfix visible-lg"></div>
<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->
<div class="clearfix visible-xs"></div>
<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->
<div class="col-sm-4 col-xs-6">
	<article>
		<!-- content -->
	</article>
</div><!-- col -->

10x. This help me!