Update docs to use new spacing util class names

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index 56e8b089c64ce20f93b178ce946c7da7a3985935..ad8c28bdd1cbdcac9604da1317e6ebaea9f7f7d8 100644 (file)
--- 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 ebbefeca4fe1af7454b6b1d20c8b19f4819e2ad3..0e6fa729eef2612d58278946f2126cf789a34367 100644 (file)
--- 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 09d0d4f8f29ab6476e8c63d5a26d90fb80938965..6d8ee54e6872425628cc28492c15d0d6b6eb3f39 100644 (file)
--- 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 9dd3c8294e785d3dfd2a706dddb5e1b56a8728a1..56687705e446b55fe1bc9b5f01b4d823c9145471 100644 (file)
--- 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 98e48fa77a756d98443177c5c40aaa6a250bd2fa..5c12153f37c78ea445ec41e9278549a335cc4012 100644 (file)
--- 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 f21010f0fb19cd07c9e3b9dbbf0c640a6bbeda27..905ff337b180aa0705ac3aefe19a1719db4b0fd0 100644 (file)
--- 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 a59f503474d29699521c9bf9375d45000fa39094..4a8e4c2d0f69264201320483384a47abdf06e01f 100644 (file)
--- 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 fcb89a3b5ad1e86150086738a4e21b9e1eca3ebf..6843af7ecfbc76896dc26a6b650ac0c70246dd5c 100644 (file)
--- 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 1fd28016a3785fe8708ebc97f9d85721e70be041..30ac6ee9cca984ca18abb57f8232657178ee8bd6 100644 (file)
--- 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 045c4b2139a759342e277e6f057db2a398808ded..1ee1ab7fb49da174066f02e9af202edb4aee018f 100644 (file)
--- 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 %}