Update docs to reflect new breakpoint naming convention

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 6e8cddf212fdeda0fd933fe4492c334c804d4a55..4c719c5d8aeffdeff43f2cb95d3eb0ac7f9f461d 100644 (file)
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -21,10 +21,10 @@
 
     <div class="container">
       <div class="row">
-        <div class="col-xs-12 col-md-3 push-md-9 bd-sidebar">
+        <div class="col-12 col-md-3 push-md-9 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <div class="col-xs-12 col-md-9 pull-md-3 bd-content">
+        <div class="col-12 col-md-9 pull-md-3 bd-content">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           {{ content }}
         </div>

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 2a2e9f9d237dd0a5165f543e354ff3d093dce3e8..00b7dc2507be710b958237c5a6e5ba3c9d36f0c5 100644 (file)
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -172,80 +172,80 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
 
 {% example html %}
 <div class="form-group row">
-  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
-  <div class="col-xs-10">
+  <label for="example-text-input" class="col-2 col-form-label">Text</label>
+  <div class="col-10">
     <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-search-input" class="col-xs-2 col-form-label">Search</label>
-  <div class="col-xs-10">
+  <label for="example-search-input" class="col-2 col-form-label">Search</label>
+  <div class="col-10">
     <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-email-input" class="col-xs-2 col-form-label">Email</label>
-  <div class="col-xs-10">
+  <label for="example-email-input" class="col-2 col-form-label">Email</label>
+  <div class="col-10">
     <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
-  <div class="col-xs-10">
+  <label for="example-url-input" class="col-2 col-form-label">URL</label>
+  <div class="col-10">
     <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
-  <div class="col-xs-10">
+  <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
+  <div class="col-10">
     <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-password-input" class="col-xs-2 col-form-label">Password</label>
-  <div class="col-xs-10">
+  <label for="example-password-input" class="col-2 col-form-label">Password</label>
+  <div class="col-10">
     <input class="form-control" type="password" value="hunter2" id="example-password-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-number-input" class="col-xs-2 col-form-label">Number</label>
-  <div class="col-xs-10">
+  <label for="example-number-input" class="col-2 col-form-label">Number</label>
+  <div class="col-10">
     <input class="form-control" type="number" value="42" id="example-number-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-datetime-local-input" class="col-xs-2 col-form-label">Date and time</label>
-  <div class="col-xs-10">
+  <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
+  <div class="col-10">
     <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-date-input" class="col-xs-2 col-form-label">Date</label>
-  <div class="col-xs-10">
+  <label for="example-date-input" class="col-2 col-form-label">Date</label>
+  <div class="col-10">
     <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-month-input" class="col-xs-2 col-form-label">Month</label>
-  <div class="col-xs-10">
+  <label for="example-month-input" class="col-2 col-form-label">Month</label>
+  <div class="col-10">
     <input class="form-control" type="month" value="2011-08" id="example-month-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-week-input" class="col-xs-2 col-form-label">Week</label>
-  <div class="col-xs-10">
+  <label for="example-week-input" class="col-2 col-form-label">Week</label>
+  <div class="col-10">
     <input class="form-control" type="week" value="2011-W33" id="example-week-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-time-input" class="col-xs-2 col-form-label">Time</label>
-  <div class="col-xs-10">
+  <label for="example-time-input" class="col-2 col-form-label">Time</label>
+  <div class="col-10">
     <input class="form-control" type="time" value="13:45:00" id="example-time-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-color-input" class="col-xs-2 col-form-label">Color</label>
-  <div class="col-xs-10">
+  <label for="example-color-input" class="col-2 col-form-label">Color</label>
+  <div class="col-10">
     <input class="form-control" type="color" value="#563d7c" id="example-color-input">
   </div>
 </div>
@@ -630,14 +630,14 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 
 {% example html %}
 <div class="row">
-  <div class="col-xs-2">
-    <input type="text" class="form-control" placeholder=".col-xs-2">
+  <div class="col-2">
+    <input type="text" class="form-control" placeholder=".col-2">
   </div>
-  <div class="col-xs-3">
-    <input type="text" class="form-control" placeholder=".col-xs-3">
+  <div class="col-3">
+    <input type="text" class="form-control" placeholder=".col-3">
   </div>
-  <div class="col-xs-4">
-    <input type="text" class="form-control" placeholder=".col-xs-4">
+  <div class="col-4">
+    <input type="text" class="form-control" placeholder=".col-4">
   </div>
 </div>
 {% endexample %}

diff --git a/docs/components/modal.md b/docs/components/modal.md
index 72cdbe56580bcb303e2668a4ded725ee63ab6046..9c37461163975267fa6db2866773949f1a0601f7 100644 (file)
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -286,11 +286,11 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
             <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/content/tables.md b/docs/content/tables.md
index 0e40c0ef7a6659cbae8781c16e19fc7dc78ca115..b927f35d5736c672891720799c1de614e390a229 100644 (file)
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -445,8 +445,8 @@ Use contextual classes to color table rows or individual cells.
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
     <colgroup>
-      <col class="col-xs-1">
-      <col class="col-xs-7">
+      <col class="col-1">
+      <col class="col-7">
     </colgroup>
     <thead>
       <tr>

diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 1670e8557c394a53c05e23e83d96f9bcc89fc762..b4bdcd3ac4605ee59938244ca64f12e18c04c615 100644 (file)
--- 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 9b8e23f072098a5caa9fda1f65640c07554622ed..1400bfd9a7736b74f9baa7752a2e6779290e7774 100644 (file)
--- 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 49e43793a150f11fe44b899209ed205bfd423a1b..b9c6dd6f1b9834b00634150a4b73317e0e3bf3aa 100644 (file)
--- 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 669221fa5becc42acd8653985e87130d68fb060c..cf59f4722ddcef5dcd61e0cbb0380803b61a1cde 100644 (file)
--- 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>

diff --git a/docs/index.html b/docs/index.html
index 3fe4c513bf5d0918a202e2ca17d7857b0b17f716..b26b239f54afe6fbb96b02ba44ae2fae3801b8b9 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -96,7 +96,7 @@ layout: home
 
     <div class="row bd-featured-sites">
     {% for showcase in site.data.showcase %}
-      <div class="col-xs-6 col-sm-3">
+      <div class="col-6 col-sm-3">
         <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
           <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
         </a>

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index a26314cd6ba60ef877b2593ecf662275cd4b7a1e..eafe7b59c5f4fa2958ddd38acff81e24d8ca0bb6 100644 (file)
--- 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 55607e464874cae7b9220fcad6028d191c9277ca..ea0a9862b92876e26211ec795284a40d4bf37e43 100644 (file)
--- 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 4334eb4d6d000f3b672ed460dae4bd7e68589a8f..6a7a1bb0914da4e29aaa1fa1c92b0658b1e5864b 100644 (file)
--- 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>