Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined

1 files changed, 18 insertions, 13 deletions

diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 4334eb4d6..69f6ae1be 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -9,6 +9,11 @@ For faster mobile-friendly development, use these utility classes for showing an
 
 Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
 
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
 ##  Available classes
 
 * The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
@@ -172,19 +177,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">&#10004; 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">&#10004; 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">&#10004; 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">&#10004; Visible on large or narrower</span>
     <span class="hidden-lg-down not-visible">Large or narrower</span>
   </div>
@@ -193,19 +198,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">&#10004; 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">&#10004; 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">&#10004; 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">&#10004; Visible on extra large</span>
     <span class="hidden-xl-up not-visible">Extra large</span>
   </div>
@@ -214,26 +219,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">&#10004; 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">&#10004; 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">&#10004; 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">&#10004; 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">&#10004; Your viewport is exactly extra large</span>
     <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
   </div>