Bootstrap 3.0:responsive column resets section of the documentation

Question

Hey so in the bootstrap 3.0 documentation if you look under the subheading "responsive column resets" it says the following:

"With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes."

Now what do they mean by this? I thought floats cleared-or didn't-based on width. What am I missing here?

Answer 1

I believe the example on http://getbootstrap.com/css/#grid-responsive-resets is wrong and not illustrating the problem.

The example on http://getbootstrap.com/css/#grid-responsive-resets not visual illustrating the problem.

your columns don't clear quite right as one is taller than the other

example without clearfix:

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

On the extra small (xs) with the first column (red) taller then the second (blue )will cause the third (green) column float on the right side of the first too.

without clearfix

with clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

col-*-12

The problem happens also when you add more the 12 columns in a row and one of this rows should be 100% (col-*-12).

Consider this situation:

On the larger grids you want:

1 | 2 | 3

On the xs grid you want:

1 | 2
  3 

You can accomplish the above with:

Without clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>  

The red background will show you the last column will overlap the first. Adding the clearfix will remove this background:

With clearfix:  
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>  

The results:

The overlap mentioned will be cause by the col-12-* classes don't have a float left, see also: https://github.com/twbs/bootstrap/issues/10152

On https://github.com/twbs/bootstrap/issues/10535 you will find an other illustration. This fiddle shows how the clearfix will solve the problem. Note <div class="col-sm-3"> here don't have a col-12-*. On the xs grid columns are 100% by default and don't have a float so col-xs-12-* will act the same as having non class on the xs grid.