diff options
Diffstat (limited to 'docs/utilities')
| -rw-r--r-- | docs/utilities/spacing.md | 16 |
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 %} |