Update docs to reflect new breakpoint naming convention

3 files changed, 53 insertions, 53 deletions

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index a26314cd6..eafe7b59c 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -76,7 +76,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
     <div class="col-xs">
       1 of 3
     </div>
-    <div class="col-xs-6">
+    <div class="col-6">
       2 of 3 (wider)
     </div>
     <div class="col-xs">
@@ -87,7 +87,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
     <div class="col-xs">
       1 of 3
     </div>
-    <div class="col-xs-5">
+    <div class="col-5">
       2 of 3 (wider)
     </div>
     <div class="col-xs">
@@ -109,7 +109,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
     <div class="col-xs col-lg-2">
       1 of 3
     </div>
-    <div class="col-xs-12 col-md-auto">
+    <div class="col-12 col-md-auto">
       Variable width content
     </div>
     <div class="col-xs col-lg-2">
@@ -120,7 +120,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
     <div class="col-xs">
       1 of 3
     </div>
-    <div class="col-xs-12 col-md-auto">
+    <div class="col-12 col-md-auto">
       Variable width content
     </div>
     <div class="col-xs col-lg-2">
@@ -133,16 +133,16 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
 
 ## Responsive flexbox
 
-Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
+Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
 
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs-12 col-sm-6">
+    <div class="col-12 col-sm-6">
       1 of 2 (stacked on mobile)
     </div>
-    <div class="col-xs-12 col-sm-6">
+    <div class="col-12 col-sm-6">
       1 of 2 (stacked on mobile)
     </div>
   </div>
@@ -220,42 +220,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
 {% example html %}
 <div class="container">
   <div class="row flex-items-xs-left">
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-center">
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-right">
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-around">
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-between">
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
-    <div class="col-xs-4">
+    <div class="col-4">
       One of two columns
     </div>
   </div>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 55607e464..ea0a9862b 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -335,21 +335,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small
 {% example html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
-  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
-  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
-  <div class="col-xs-6">.col-xs-6</div>
-  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-6">.col-6</div>
+  <div class="col-6">.col-6</div>
 </div>
 {% endexample %}
 </div>
@@ -361,15 +361,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
-  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
-  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
+  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
   <!-- Optional: clear the XS cols if their content doesn't match in height -->
   <div class="clearfix hidden-sm-up"></div>
-  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 </div>
 {% endexample %}
 </div>
@@ -381,9 +381,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col-xs-9">.col-xs-9</div>
-  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
-  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+  <div class="col-9">.col-9</div>
+  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
 </div>
 {% endexample %}
 </div>
@@ -395,14 +395,14 @@ With the four tiers of grids available you're bound to run into issues where, at
 <div class="bd-example-row">
 {% example html %}
 <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>
+  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
+  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 
   <!-- Add the extra clearfix for only the required viewport -->
   <div class="clearfix hidden-sm-up"></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 class="col-6 col-sm-3">.col-6 .col-sm-3</div>
+  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 </div>
 {% endexample %}
 </div>
@@ -453,11 +453,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
   <div class="col-sm-9">
     Level 1: .col-sm-9
     <div class="row">
-      <div class="col-xs-8 col-sm-6">
-        Level 2: .col-xs-8 .col-sm-6
+      <div class="col-8 col-sm-6">
+        Level 2: .col-8 .col-sm-6
       </div>
-      <div class="col-xs-4 col-sm-6">
-        Level 2: .col-xs-4 .col-sm-6
+      <div class="col-4 col-sm-6">
+        Level 2: .col-4 .col-sm-6
       </div>
     </div>
   </div>
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">&#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 +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">&#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 +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">&#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>