Better Documentation on the new grid sizes classes.

[Bartmax]

Since the release of BS3 I seeing more questions about how to apply all column sizes to a div or examples with all column sizes like :

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6"></div>

I think is a good idea make a point in docs exactly informing users there's no need to do that because BS3 bubble up the column size automagically.

[phloe]

I agree. The examples are very confusing - @Bartmax 's doc example:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6"></div>

should ideally be written as:

<div class="col-md-4 col-xs-6"></div>

[Bartmax]

that wasn't a doc example, but a question on SO.

On Sun, Sep 1, 2013 at 10:58 AM, Rasmus Fløe [email protected]:

I agree. The examples are very confusing - @Bartmaxhttps://github.com/Bartmax's doc example:

should ideally be written as:

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10296#issuecomment-23625280
.

[phloe]

... Ok then. Here's an actual example from http://getbootstrap.com/css/#grid :

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

which would ideally be written as:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

[cvrebert]

Mostly fixed by #10856.