Bootstrap 3.0: responsive column resets documentation section

Question

Hey, in the bootstrap 3.0 documentation, if you look under the subheading “responsive column reset”, it says the following:

“With the four levels of grids available, you should run into problems when your columns are not quite correct at certain breakpoints, because one is taller than the other. To fix this, use a combination of .clearfix and our responsive utility classes.”

Now, what do they mean by that? I thought the floats were cleaned - or not in width. What am I missing here?

Answer 1

I believe that the example http://getbootstrap.com/css/#grid-responsive-resets is incorrect and does not illustrate the problem.

The example http://getbootstrap.com/css/#grid-responsive-resets does not visualize the problem.

your columns are not entirely clear, since one is higher 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 an extra small (xs) with the first column (red) above, and the second (blue) will call the third (green) column with the right side of the first.

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 arises when adding 12 columns in a row, and one of these rows should be 100% (col - * - 12).

Consider this situation:

On the large grids you want:

  1 |  2 |  3 

On the xs grid you want:

  1 |  2
   3 

You can do the above:

 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> 

A red background will indicate that the last column will overlap the first. Adding 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> 

Results:

The specified overlap will be caused by the fact that the col-12-* classes do not have a float to the left, see also: https://github.com/twbs/bootstrap/issues/10152 p>

At https://github.com/twbs/bootstrap/issues/10535 you will find another illustration. This script shows how clearfix solves the problem. Note <div class="col-sm-3"> there is no col-12-* . By default, the xs grid columns are 100% and do not have a float, so col-xs-12-* will act just like a non-class in the xs grid.