Clearing Bootstrap 3 columns

Clearing Bootstrap 3 columns

IvarRafn wrote this on Nov 03, 2013


The grid system in Bootstrap 3 is great, you can easily create the layout that you want by using rows and columns and you can even control how you want the columns to adapt to different devices.

The Problem

Now lets say we were designing for a large desktop and a medium sized desktop and we want a grid layout with 4 columns for large and 3 columns when the viewport matches the medium desktop.

The markup would be something like this:

<div class="row">
  <div class="col-md-4 col-lg-3"></div>
  <div class="col-md-4 col-lg-3"></div>
  <div class="col-md-4 col-lg-3"></div>
  <div class="col-md-4 col-lg-3"></div>
  <!-- More Columns -->
</div>

Example: Large desktop Large Desktop


When this grid collapses into the medium view there should be three columns all stacked up nicely. However if one of the columns is taller than the other they won't clear correctly.

See what I mean? Large Desktop


In the Bootstrap documentation for the grid system they advise you to add a new div in between columns to help it understand where the columns should clear. The div should have a clearfix class so the columns clear to the left and one of the helper classes so you can target a specific viewport.

Official docs:

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

This is just not good enough for me, think about it, if you would have a complex grid system with different number of columns for each viewport and you would then need a clearfix div in different places and all of this rendered using conditional statements with your server-side code. It's just to much of a hassle.

The Solution

We created a simple set of CSS rules that apply to our columns and control if they should clear:left or not. If you look at a grid with 4 columns (col-lg-3) as shown above in the first image you know that the fifth div with the class (col-lg-3) will have to be cleared.

So this can be done with CSS like this:

.col-lg-3:nth-child(4n+1){
    clear: left;
}

It works beautifully and I don't have to think about adding any new markup to clear the columns. I know that if there should only be 3 columns the fourth should always clear left. The same goes with all of the configurations, if there are 2 columns the third should clear, 4 columns the fifth should clear and so on.

Below is the complete list of CSS rules to fix this problem, note that the media query sizes can be different for you but these are the default ones.

You can see this hack in action on our latest WordPress theme Particle

View Demo Page


Here's the complete CSS code:

/*  Tablet  */
@media (min-width:767px){

  /* Column clear fix */
  .col-lg-1:nth-child(12n+1),
  .col-lg-2:nth-child(6n+1),
  .col-lg-3:nth-child(4n+1),
  .col-lg-4:nth-child(3n+1),
  .col-lg-6:nth-child(2n+1),
  .col-md-1:nth-child(12n+1),
  .col-md-2:nth-child(6n+1),
  .col-md-3:nth-child(4n+1),
  .col-md-4:nth-child(3n+1),
  .col-md-6:nth-child(2n+1){
    clear: none;
  }
  .col-sm-1:nth-child(12n+1),
  .col-sm-2:nth-child(6n+1),
  .col-sm-3:nth-child(4n+1),
  .col-sm-4:nth-child(3n+1),
  .col-sm-6:nth-child(2n+1){
    clear: left;
  }
}


/*  Medium Desktop  */
@media (min-width:992px){

  /* Column clear fix */
  .col-lg-1:nth-child(12n+1),
  .col-lg-2:nth-child(6n+1),
  .col-lg-3:nth-child(4n+1),
  .col-lg-4:nth-child(3n+1),
  .col-lg-6:nth-child(2n+1),
  .col-sm-1:nth-child(12n+1),
  .col-sm-2:nth-child(6n+1),
  .col-sm-3:nth-child(4n+1),
  .col-sm-4:nth-child(3n+1),
  .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  .col-md-1:nth-child(12n+1),
  .col-md-2:nth-child(6n+1),
  .col-md-3:nth-child(4n+1),
  .col-md-4:nth-child(3n+1),
  .col-md-6:nth-child(2n+1){
    clear: left;
  }
}


/*  Large Desktop  */
@media (min-width:1200px){

  /* Column clear fix */
  .col-md-1:nth-child(12n+1),
  .col-md-2:nth-child(6n+1),
  .col-md-3:nth-child(4n+1),
  .col-md-4:nth-child(3n+1),
  .col-md-6:nth-child(2n+1),
  .col-sm-1:nth-child(12n+1),
  .col-sm-2:nth-child(6n+1),
  .col-sm-3:nth-child(4n+1),
  .col-sm-4:nth-child(3n+1),
  .col-sm-6:nth-child(2n+1){
    clear: none;
  }
  .col-lg-1:nth-child(12n+1),
  .col-lg-2:nth-child(6n+1),
  .col-lg-3:nth-child(4n+1),
  .col-lg-4:nth-child(3n+1),
  .col-lg-6:nth-child(2n+1){
    clear: left;
  }
}

Share this post


About the author

Ivar Rafn is a web developer and co-founder of bluthemes. Bluthemes creates WordPress themes and sells them exclusively on ThemeForest.net. Check out the theme portfolio right here.

Leave a comment