aboutsummaryrefslogtreecommitdiff
path: root/docs/utilities
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-09-08 22:16:28 -0700
committerMark Otto <[email protected]>2016-09-08 22:16:28 -0700
commit0be876359ed4ed7c8a3d315a6ef9a04eede8d765 (patch)
treee581144cab3da2959274f18206c2f01a14fee50d /docs/utilities
parentae784c9521101c391ecc98e906ddf18e6aeb459b (diff)
downloadbootstrap-0be876359ed4ed7c8a3d315a6ef9a04eede8d765.tar.xz
bootstrap-0be876359ed4ed7c8a3d315a6ef9a04eede8d765.zip
Update docs to use new spacing util class names
Diffstat (limited to 'docs/utilities')
-rw-r--r--docs/utilities/spacing.md16
1 files changed, 8 insertions, 8 deletions
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 %}