diff options
| author | Eric Nolte <[email protected]> | 2016-11-04 10:54:34 -0600 |
|---|---|---|
| committer | Eric Nolte <[email protected]> | 2016-11-04 10:54:34 -0600 |
| commit | cec0c7c6d6c6926dd372a91172c0081bb09fcc09 (patch) | |
| tree | bd7283256c2a64772712f7234d25fb12c072a923 /docs/layout/responsive-utilities.md | |
| parent | 9402be4d44edafd7f558aa2b96f44172175fda34 (diff) | |
| download | bootstrap-cec0c7c6d6c6926dd372a91172c0081bb09fcc09.tar.xz bootstrap-cec0c7c6d6c6926dd372a91172c0081bb09fcc09.zip | |
Update docs to reflect new breakpoint naming convention
Diffstat (limited to 'docs/layout/responsive-utilities.md')
| -rw-r--r-- | docs/layout/responsive-utilities.md | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 4334eb4d6..6a7a1bb09 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -172,19 +172,19 @@ Resize your browser or load on different devices to test the responsive utility Green checkmarks indicate the element **is visible** in your current viewport. <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-sm-up visible">✔ Visible on extra small</span> <span class="hidden-xs-down not-visible">Extra small</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-md-up visible">✔ Visible on small or narrower</span> <span class="hidden-sm-down not-visible">Small or narrower</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-lg-up visible">✔ Visible on medium or narrower</span> <span class="hidden-md-down not-visible">Medium or narrower</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-xl-up visible">✔ Visible on large or narrower</span> <span class="hidden-lg-down not-visible">Large or narrower</span> </div> @@ -193,19 +193,19 @@ Green checkmarks indicate the element **is visible** in your current viewport. <hr> <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-xs-down visible">✔ Visible on small or wider</span> <span class="hidden-sm-up not-visible">Small or wider</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-sm-down visible">✔ Visible on medium or wider</span> <span class="hidden-md-up not-visible">Medium or wider</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-md-down visible">✔ Visible on large or wider</span> <span class="hidden-lg-up not-visible">Large or wider</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-6 col-sm-3"> <span class="hidden-lg-down visible">✔ Visible on extra large</span> <span class="hidden-xl-up not-visible">Extra large</span> </div> @@ -214,26 +214,26 @@ Green checkmarks indicate the element **is visible** in your current viewport. <hr> <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-4"> + <div class="col-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-4"> + <div class="col-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-4"> + <div class="col-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> <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-4"> + <div class="col-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-4"> + <div class="col-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> |