What this Bootstrap Utility API class does
Set the negative margin shorthand property of an element, which means you're setting margin top, margin bottom, margin left and margin right to the same value.
Negative margins are not enabled by default. You need to set the Bootstrap SASS variable $enable-negative-margins
to true. To use negative margins, add "n" in front of the normal margin class. So .m-5
becomes .m-n5
for the negative version.
Example usage & available classes
<div class="m-n1"></div>
<div class="m-n2"></div>
<div class="m-n3"></div>
<div class="m-n4"></div>
<div class="m-n5"></div>
Example override
In the example override below, we are adding the additional class of "m-n6" with a value of "-6rem". Note that you can update Bootstrap's SASS $spacer variable to add additional margin and padding options. This would be a cleaner method to use rather than using the API because any additional values you add to the $spacer variable would automatically be available for all the margin and padding utilities.
"negative-margin": map-merge(
map-get($utilities, "negative-margin"),
(
values: map-merge(
map-get(map-get($utilities, "negative-margin"), "values"), (
n6: -6rem
)
)
)
)