diff options
Diffstat (limited to 'docs/layout/responsive-utilities.md')
| -rw-r--r-- | docs/layout/responsive-utilities.md | 20 |
1 files changed, 15 insertions, 5 deletions
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 839aeeb24..4334eb4d6 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -1,6 +1,7 @@ --- layout: docs title: Responsive utilities +description: Use responsive display utility classes for showing and hiding content by device, via media query. group: layout --- @@ -188,6 +189,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 +210,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> |