kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

add docs

Browse source
This commit is contained in:
Mark Otto 2018-07-08 17:28:37 -07:00
parent f6b4945f1e
commit 0153f7d8cd
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
docs/4.1/utilities/spacing.md
View file

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