diff options
| -rw-r--r-- | docs/4.1/utilities/spacing.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/docs/4.1/utilities/spacing.md b/docs/4.1/utilities/spacing.md index b374748e0..dad1c0085 100644 --- a/docs/4.1/utilities/spacing.md +++ b/docs/4.1/utilities/spacing.md @@ -81,3 +81,25 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente Centered element </div> {% endhighlight %} + +### Negative margin + +In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints. + +The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`: + +{% highlight scss %} +.mt-n1 { + margin-top: -0.25rem !important; +} +{% endhighlight %} + +Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`. + +{% capture example %} +<div class="row mx-md-n5"> + <div class="col py-3 px-md-5 border bg-light">Custom column padding</div> + <div class="col py-3 px-md-5 border bg-light">Custom column padding</div> +</div> +{% endcapture %} +{% include example.html content=example %} |