diff --git a/css.html b/css.html index 965bdc54810492153144a47fb8bc7b3d9be0c02d..51c075984af1ad2a5ca661447a1a83557ac51b16 100644 --- a/css.html +++ b/css.html @@ -173,6 +173,7 @@ base_url: "../" </tbody> </table> </div> + <p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> @@ -278,27 +279,27 @@ base_url: "../" <div class="bs-docs-grid"> <div class="row show-grid"> <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 class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row show-grid"> - <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> + <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-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> </div> {% highlight html %} <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 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-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> + <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-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> {% endhighlight %}