Update docs to reflect new breakpoint naming convention

4 files changed, 49 insertions, 49 deletions

diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 1670e8557..b4bdcd3ac 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -62,22 +62,22 @@
           <h1>Dashboard</h1>
 
           <div class="row placeholders">
-            <div class="col-xs-6 col-sm-3 placeholder">
+            <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col-xs-6 col-sm-3 placeholder">
+            <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col-xs-6 col-sm-3 placeholder">
+            <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col-xs-6 col-sm-3 placeholder">
+            <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
index 9b8e23f07..1400bfd9a 100644
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -28,9 +28,9 @@
       <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
 
       <div class="row">
-        <div class="col-xs-4">.col-xs-4</div>
-        <div class="col-xs-4">.col-xs-4</div>
-        <div class="col-xs-4">.col-xs-4</div>
+        <div class="col-4">.col-4</div>
+        <div class="col-4">.col-4</div>
+        <div class="col-4">.col-4</div>
       </div>
 
       <div class="row">
@@ -105,17 +105,17 @@
       <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
       <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
       <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>
       <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>
       <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>
 
       <hr>
@@ -123,13 +123,13 @@
       <h3>Mixed: mobile, tablet, and desktop</h3>
       <p></p>
       <div class="row">
-        <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
-        <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
+        <div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
+        <div class="col-6 col-lg-4">.col-6 .col-lg-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-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>
+        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
       </div>
 
       <hr>
@@ -137,18 +137,18 @@
       <h3>Column clearing</h3>
       <p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
       <div class="row">
-        <div class="col-xs-6 col-sm-3">
-          .col-xs-6 .col-sm-3
+        <div class="col-6 col-sm-3">
+          .col-6 .col-sm-3
           <br>
           Resize your viewport or check it out on your phone for an example.
         </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>
 
         <!-- 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>
 
       <hr>
diff --git a/docs/examples/index.md b/docs/examples/index.md
index 49e43793a..b9c6dd6f1 100644
--- a/docs/examples/index.md
+++ b/docs/examples/index.md
@@ -10,14 +10,14 @@ title: Examples
 Examples that focus on implementing uses of built-in components provided by Bootstrap.
 
 <div class="row bd-examples">
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/starter-template/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
     </a>
     <h4>Starter template</h4>
     <p>Nothing but the basics: compiled CSS and JavaScript.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/grid/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt="">
     </a>
@@ -26,14 +26,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/jumbotron/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron.jpg" alt="">
     </a>
     <h4>Jumbotron</h4>
     <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/narrow-jumbotron/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt="">
     </a>
@@ -47,14 +47,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
 Taking the default navbar component and showing how it can be moved, placed, and extended.
 
 <div class="row bd-examples">
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/navbar/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar.jpg" alt="">
     </a>
     <h4>Navbar</h4>
     <p>Super basic template that includes the navbar along with some additional content.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/navbar-top/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-static.jpg" alt="">
     </a>
@@ -63,7 +63,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/navbar-top-fixed/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-fixed.jpg" alt="">
     </a>
@@ -77,14 +77,14 @@ Taking the default navbar component and showing how it can be moved, placed, and
 Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
 
 <div class="row bd-examples">
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/album/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/album.jpg" alt="">
     </a>
     <h4>Album</h4>
     <p>Simple one-page template for photo galleries, portfolios, and more.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/cover/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/cover.jpg" alt="">
     </a>
@@ -93,14 +93,14 @@ Brand new components and templates to help folks quickly get started with Bootst
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/carousel/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/carousel.jpg" alt="">
     </a>
     <h4>Carousel</h4>
     <p>Customize the navbar and carousel, then add some new components.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/blog/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/blog.jpg" alt="">
     </a>
@@ -109,14 +109,14 @@ Brand new components and templates to help folks quickly get started with Bootst
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/dashboard/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/dashboard.jpg" alt="">
     </a>
     <h4>Dashboard</h4>
     <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/signin/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sign-in.jpg" alt="">
     </a>
@@ -125,14 +125,14 @@ Brand new components and templates to help folks quickly get started with Bootst
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/justified-nav/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt="">
     </a>
     <h4>Justified nav</h4>
     <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
   </div>
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/sticky-footer/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer.jpg" alt="">
     </a>
@@ -141,7 +141,7 @@ Brand new components and templates to help folks quickly get started with Bootst
   </div>
   <div class="clearfix hidden-md-up"></div>
 
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/sticky-footer-navbar/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
     </a>
@@ -155,7 +155,7 @@ Brand new components and templates to help folks quickly get started with Bootst
 Examples that focus on future-friendly features or techniques.
 
 <div class="row bd-examples">
-  <div class="col-xs-6 col-md-4">
+  <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/offcanvas/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/offcanvas.jpg" alt="">
     </a>
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 669221fa5..cf59f4722 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -34,7 +34,7 @@
 
       <div class="row row-offcanvas row-offcanvas-right">
 
-        <div class="col-xs-12 col-sm-9">
+        <div class="col-12 col-sm-9">
           <p class="float-xs-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
@@ -43,32 +43,32 @@
             <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
           </div>
           <div class="row">
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col-xs-6 col-lg-4">
+            <div class="col-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
@@ -76,7 +76,7 @@
           </div><!--/row-->
         </div><!--/span-->
 
-        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
+        <div class="col-6 col-sm-3 sidebar-offcanvas" id="sidebar">
           <div class="list-group">
             <a href="#" class="list-group-item active">Link</a>
             <a href="#" class="list-group-item">Link</a>