Float clearing in Bootstrap Grid

I love using the Bootstrap grid, but I always have float clearing issues. Other column class solutions tend to include a “first” class (example) to fix this. This code replicates that functionality.

Pass an array of bootstrap classes and the current count (starting from 0), and this function will add the proper “-first” classes on items that appear first in a row.

Do you use Bootstrap? What do you use for clearing floats? I can’t be the only person with this problem…

Example

<?php
if( have_posts() ): while( have_posts() ): the_post();
global $wp_query;
$classes = ea_column_class( array( 'col-sm-6', 'col-md-4', 'col-lg-3' ), $wp_query->current_post );
echo '<div class="' . $classes . '">';
get_template_part( 'partials/archive', get_post_type() );
echo '</div>';
endwhile; endif;
view raw functions.php hosted with ❤ by GitHub

Code

Note: I’m using SASS and the include media library to simplify these media queries, but you can just as easily do this with standard CSS. Just change those @include media() lines to standard media queries.

<?php
/**
* Column Classes
*
* Adds "-first" classes when appropriate for clearing float
* @see /assets/scss/partials/layout.scss
*
* @param array $classes, bootstrap-style classes, ex: array( 'col-lg-4', 'col-md-6' )
* @param int $current, current post in loop
* @param bool $join, whether to join classes (return string) or return array
* @return array/string $classes
*/
function ea_column_class( $classes = array(), $current = false, $join = true ) {
if( false === $current )
return $classes;
$columns = array( 2, 3, 4, 6 );
foreach( $columns as $column ) {
if( 0 == $current % $column ) {
$col = 12 / $column;
foreach( $classes as $class ) {
if( false != strstr( $class, (string) $col ) && false == strstr( $class, '12' ) ) {
$classes[] = str_replace( $col, 'first', $class );
}
}
}
}
if( $join ) {
return join( ' ', $classes );
} else {
return $classes;
}
}
view raw helper-functions.php hosted with ❤ by GitHub
@include media(">=tablet", "<medium") {
.col-sm-first {
clear: both;
}
}
@include media(">=medium", "<large") {
.col-md-first {
clear: both;
}
}
@include media(">=large") {
.col-lg-first {
clear: both;
}
}
view raw layout.scss hosted with ❤ by GitHub

Tutorial

Receive New Posts by Email

Comments

  1. I’m interested to hear the long term expectations of support on float based “grid” systems in general. Float begone! Clear no more 🙂

    Bootstrap 4 (er.. when it’s released) will move to a Flexbox “grid” system. Zurb’s Foundation 6.4 has already moved to Flexbox with their hybrid? XY Grid and I’d suspect they’ll also be first to implement “CSS Grid” itself now that it’s supported in (most) current browsers. Hopefully we’ll also continue seeing lighter CSS with regards to media queries too…

    1. I can’t wait to switch over to the CSS Grid. I’d love to see a lightweight CSS grid framework come out that isn’t wrapped up in a much larger CSS framework.

      I use very little of bootstrap (see here).

    1. If you’re using SASS you can do the math inline: https://gist.github.com/billerickson/47bdd4fa598e20f84c2b72b0a78d9189

      But there’s a few things I like about Bootstrap:
      1. Consistent gutter. When you’re using a percentage-based gutter (like your example), it’s not a fixed pixel amount at all sizes – it’s always different (proportional to wrapping element). For instance, if you put two .one-half divs inside a .one-half div, the smaller ones will also have a smaller gutter. It doesn’t look consistent.
      2. No math required. I just say how many columns are used at each breaking point and the style guide determines it.

      For it to work well you really need a site designed with a 12 column grid in mind. But once you have that, it’s so nice. Define a few variables (gutter width, max width of site, small/medium/large break points) and everything just works.

Leave a comment