mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
add docs
This commit is contained in:
parent
f6b4945f1e
commit
0153f7d8cd
@ -81,3 +81,25 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
|
|||||||
Centered element
|
Centered element
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% 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 %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user