diff options
| author | Mark Otto <[email protected]> | 2014-12-04 21:02:04 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-04 21:02:04 -0800 |
| commit | a1a3a007b6c83b6142c47379d7c3e754deaf8193 (patch) | |
| tree | 04f73b40d3a2f9de5bb998a44546ce4df2d38602 /docs/examples | |
| parent | 156750941b013f700c7338a81184c58b6fd7e9f0 (diff) | |
| download | bootstrap-a1a3a007b6c83b6142c47379d7c3e754deaf8193.tar.xz bootstrap-a1a3a007b6c83b6142c47379d7c3e754deaf8193.zip | |
tweak grid docs, add new tier
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/grid/index.html | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index e07417c44..bf50845aa 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -28,6 +28,39 @@ <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p> </div> + <h3>Five grid tiers</h3> + <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p> + +<div class="row"> + <div class="col-xs-4">.col-xs-4</div> + <div class="col-xs-4">.col-xs-4</div> + <div class="col-xs-4">.col-xs-4</div> +</div> + +<div class="row"> + <div class="col-sm-4">.col-sm-4</div> + <div class="col-sm-4">.col-sm-4</div> + <div class="col-sm-4">.col-sm-4</div> +</div> + +<div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4">.col-md-4</div> +</div> + +<div class="row"> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> +</div> + +<div class="row"> + <div class="col-xl-4">.col-xl-4</div> + <div class="col-xl-4">.col-xl-4</div> + <div class="col-xl-4">.col-xl-4</div> +</div> + <h3>Three equal columns</h3> <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p> <div class="row"> |