Clearing Bootstrap 3 columns

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

---

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?

---

In the Bootstrap documentation for the grid system they advise you to add a new div in between the 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.

---

Here's the complete CSS code to fix your clearfix issues:

/*  Bootstrap Clearfix */

/*  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;
  }
}