Update docs to use new spacing util class names

10 files changed, 28 insertions, 28 deletions

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index 56e8b089c..ad8c28bdd 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -60,7 +60,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/collapse.md b/docs/components/collapse.md
index ebbefeca4..0e6fa729e 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -45,7 +45,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>
@@ -57,7 +57,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>
@@ -69,7 +69,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 09d0d4f8f..6d8ee54e6 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -845,7 +845,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 9dd3c8294..56687705e 100644
--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@@ -12,7 +12,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/navbar.md b/docs/components/navbar.md
index 98e48fa77..5c12153f3 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -64,7 +64,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 %}
@@ -245,7 +245,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
     &#9776;
   </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>
diff --git a/docs/content/images.md b/docs/content/images.md
index f21010f0f..905ff337b 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
 
 ## Aligning images
 
-Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
+Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
   <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
@@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded m-x-auto d-block" alt="...">
+<img src="..." class="img-rounded mx-auto d-block" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
diff --git a/docs/content/typography.md b/docs/content/typography.md
index a59f50347..4a8e4c2d0 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -168,7 +168,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
 
 {% example html %}
 <blockquote class="blockquote">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {% endexample %}
 
@@ -178,7 +178,7 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
 
 {% example html %}
 <blockquote class="blockquote">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
@@ -189,7 +189,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
 
 {% example html %}
 <blockquote class="blockquote blockquote-reverse">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
index fcb89a3b5..6843af7ec 100644
--- a/docs/layout/media-object.md
+++ b/docs/layout/media-object.md
@@ -45,7 +45,7 @@ Media components can also be nested.
   <div class="media-body">
     <h4 class="media-heading">Media heading</h4>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-    <div class="media m-t-2">
+    <div class="media mt-2">
       <a class="media-left" href="#">
         <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
       </a>
@@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
       <h4 class="media-heading">Media heading</h4>
       <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
       <!-- Nested media object -->
-      <div class="media m-t-2">
+      <div class="media mt-2">
         <a class="media-left" href="#">
           <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
         </a>
@@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
           <h4 class="media-heading">Nested media heading</h4>
           Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
           <!-- Nested media object -->
-          <div class="media m-t-2">
+          <div class="media mt-2">
             <div class="media-left">
               <a href="#">
                 <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
         </div>
       </div>
       <!-- Nested media object -->
-      <div class="media m-t-2">
+      <div class="media mt-2">
         <div class="media-left">
           <a href="#">
             <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
       </div>
     </div>
   </li>
-  <li class="media m-t-2">
+  <li class="media mt-2">
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
diff --git a/docs/migration.md b/docs/migration.md
index 1fd28016a..30ac6ee9c 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -182,7 +182,7 @@ Dropped entirely for the new card component.
 
 - Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
 - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
-- Dropped `.center-block` for the new `.m-x-auto` class.
+- Dropped `.center-block` for the new `.mx-auto` class.
 
 ### Vendor prefix mixins
 Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md
index 045c4b213..1ee1ab7fb 100644
--- a/docs/utilities/spacing.md
+++ b/docs/utilities/spacing.md
@@ -6,7 +6,7 @@ group: utilities
 
 Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
 
-The classes are named using the format: `{property}-{sides}-{size}`
+The classes are named using the format: `{property}{sides}-{size}`
 
 Where *property* is one of:
 
@@ -35,35 +35,35 @@ Where *size* is one of:
 Here are some representative examples of these classes:
 
 {% highlight scss %}
-.m-t-0 {
+.mt-0 {
   margin-top: 0 !important;
 }
 
-.m-l-1 {
+.ml-1 {
   margin-left: $spacer-x !important;
 }
 
-.p-x-2 {
+.px-2 {
   padding-left: ($spacer-x * 1.5) !important;
   padding-right: ($spacer-x * 1.5) !important;
 }
 
-.p-a-3 {
+.p-3 {
   padding: ($spacer-y * 3) ($spacer-x * 3) !important;
 }
 {% endhighlight %}
 
 ### Horizontal centering
-Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
+Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
 
 <div class="bd-example">
-  <div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
+  <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
     Centered element
   </div>
 </div>
 
 {% highlight html %}
-<div class="m-x-auto" style="width: 200px;">
+<div class="mx-auto" style="width: 200px;">
   Centered element
 </div>
 {% endhighlight %}