aboutsummaryrefslogtreecommitdiff
path: root/examples/grid
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-09-01 09:33:11 +0200
committerMark Otto <[email protected]>2013-09-01 09:33:11 +0200
commitf29ec45715d33c7667682517bbab4ec285716bde (patch)
tree67f82cc5df0578ed9685f876447b31776c9cea51 /examples/grid
parent5491d53b99c3dfa54622ca0d0bba52206c883a14 (diff)
parente47ebf3686440df07a83a9d2643b70087ec4fb81 (diff)
downloadbootstrap-f29ec45715d33c7667682517bbab4ec285716bde.tar.xz
bootstrap-f29ec45715d33c7667682517bbab4ec285716bde.zip
Merge branch 'master' into deprecate_screen_containers
Diffstat (limited to 'examples/grid')
-rw-r--r--examples/grid/index.html29
1 files changed, 29 insertions, 0 deletions
diff --git a/examples/grid/index.html b/examples/grid/index.html
index 239b0d16a..7fc46c684 100644
--- a/examples/grid/index.html
+++ b/examples/grid/index.html
@@ -109,6 +109,35 @@
<div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
</div>
+ <hr>
+
+ <h3>Column clearing</h3>
+ <p>Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.</p>
+ <div class="row">
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+ <!-- Add the extra clearfix for only the required viewport -->
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ </div>
+
+ <hr>
+
+ <h3>Offset, push, and pull resets</h3>
+ <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
+ <div class="row">
+ <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+ <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
+ <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+ </div>
+
+
</div> <!-- /container -->