Update docs to use new spacing util class names

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 %}