diff options
| author | Mark Otto <[email protected]> | 2014-12-04 23:27:08 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-04 23:27:08 -0800 |
| commit | a4e991c1a6f083243fcb6c3fab02a4818c06c1c5 (patch) | |
| tree | 090813babd728eab2bfe383b181e9dcdba16dd5a /docs/examples | |
| parent | 8454382b6af89434b5cc0ce58efa955b649d904d (diff) | |
| parent | bc3a2f669d6527c72e3896af5c2fc97048e67595 (diff) | |
| download | bootstrap-a4e991c1a6f083243fcb6c3fab02a4818c06c1c5.tar.xz bootstrap-a4e991c1a6f083243fcb6c3fab02a4818c06c1c5.zip | |
Merge pull request #3 from twbs/v4_grid
Add new grid 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"> |