diff options
| author | Mark Otto <[email protected]> | 2016-06-12 21:18:23 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-06-12 21:18:23 -0700 |
| commit | 7071fe9c1ba90c2ab645b088a51eaf036a22edda (patch) | |
| tree | 43b7827eac408a2e5e35c24f3b88942f0dc997ba /docs | |
| parent | aaad85bc306ccf35bd749ea43d2aa768e4ebabeb (diff) | |
| download | bootstrap-7071fe9c1ba90c2ab645b088a51eaf036a22edda.tar.xz bootstrap-7071fe9c1ba90c2ab645b088a51eaf036a22edda.zip | |
Fixes #17089 a bit
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/scss/_responsive-tests.scss | 1 | ||||
| -rw-r--r-- | docs/layout/responsive-utilities.md | 19 |
2 files changed, 15 insertions, 5 deletions
diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss index 79fe721bb..edba088c6 100644 --- a/docs/assets/scss/_responsive-tests.scss +++ b/docs/assets/scss/_responsive-tests.scss @@ -36,6 +36,7 @@ margin-top: .25rem; } .responsive-utilities-test .col-xs-6 { + margin-top: .5rem; margin-bottom: .5rem; } .responsive-utilities-test span { diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 839aeeb24..2a44fd589 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport. <span class="hidden-lg-down not-visible">Large or narrower</span> </div> </div> + +<hr> + <div class="row responsive-utilities-test visible-on"> <div class="col-xs-6 col-sm-3"> <span class="hidden-xs-down visible">✔ Visible on small or wider</span> @@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport. <span class="hidden-xl-up not-visible">Extra large</span> </div> </div> + +<hr> + <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span> <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span> <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span> <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span> </div> - <div class="col-xs-6 col-sm-3"> + </div> + +<div class="row responsive-utilities-test visible-on"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span> <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span> <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span> </div> |