Merge pull request #20684 from twbs/v4-utils

v4: The Utilities Update

7 files changed, 17 insertions, 17 deletions

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index 54172a673..7ab6df8f4 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -61,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
 <div class="alert alert-success" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-  <p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
 {% endexample %}
 
diff --git a/docs/components/card.md b/docs/components/card.md
index 64cf6c1c5..be9846a30 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-tabs card-header-tabs pull-xs-left">
+    <ul class="nav nav-tabs card-header-tabs float-xs-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
@@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
   <div class="card-header">
-    <ul class="nav nav-pills card-header-pills pull-xs-left">
+    <ul class="nav nav-pills card-header-pills float-xs-left">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>
       </li>
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index aa82127ed..9094b793e 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -46,7 +46,7 @@ Extend the default collapse behavior to create an accordion.
 <div id="accordion" role="tablist" aria-multiselectable="true">
   <div class="card">
     <div class="card-header" role="tab" id="headingOne">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Collapsible Group Item #1
         </a>
@@ -58,7 +58,7 @@ Extend the default collapse behavior to create an accordion.
   </div>
   <div class="card">
     <div class="card-header" role="tab" id="headingTwo">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
         <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Collapsible Group Item #2
         </a>
@@ -70,7 +70,7 @@ Extend the default collapse behavior to create an accordion.
   </div>
   <div class="card">
     <div class="card-header" role="tab" id="headingThree">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
         <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
           Collapsible Group Item #3
         </a>
diff --git a/docs/components/forms.md b/docs/components/forms.md
index ac5b62e34..c7da5c0fd 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -846,7 +846,7 @@ Add other states to your custom forms with our validation classes.
     <span class="custom-control-description">Check this custom checkbox</span>
   </label>
 </div>
-<div class="form-group has-danger m-b-0">
+<div class="form-group has-danger mb-0">
   <label class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input">
     <span class="custom-control-indicator"></span>
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md
index e47becee9..0fa7215aa 100644
--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@@ -13,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
 <div class="jumbotron">
   <h1 class="display-3">Hello, world!</h1>
   <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-  <hr class="m-y-2">
+  <hr class="my-2">
   <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
   <p class="lead">
     <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 7b159bc79..22982d1b9 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">14</span>
+    <span class="tag tag-default tag-pill float-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">2</span>
+    <span class="tag tag-default tag-pill float-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">1</span>
+    <span class="tag tag-default tag-pill float-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 4d67b5663..49ca8533d 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-  <form class="form-inline pull-xs-right">
+  <form class="form-inline float-xs-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-outline-success" type="submit">Search</button>
   </form>
@@ -65,7 +65,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 </nav>
 
 <nav class="navbar navbar-light bg-faded">
-  <h1 class="navbar-brand m-b-0">Navbar</h1>
+  <h1 class="navbar-brand mb-0">Navbar</h1>
 </nav>
 
 {% endexample %}
@@ -130,7 +130,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-info" type="submit">Search</button>
     </form>
@@ -151,7 +151,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-secondary" type="submit">Search</button>
     </form>
@@ -172,7 +172,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-outline-primary" type="submit">Search</button>
     </form>
@@ -244,7 +244,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 <nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
   <div class="collapse" id="exCollapsingNavbar">
-    <div class="bg-inverse p-a-1">
+    <div class="bg-inverse p-1">
       <h4>Collapsed content</h4>
       <span class="text-muted">Toggleable via the navbar brand.</span>
     </div>