What this Bootstrap Utility API class does
Set the same negative value for the margin left and right property of an element.
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 .mx-5
becomes .mx-n5
for the negative version.
Example usage & available classes
<div class="mx-n1"></div>
<div class="mx-n2"></div>
<div class="mx-n3"></div>
<div class="mx-n4"></div>
<div class="mx-n5"></div>
Example override
In the example override below, we are adding the additional class of "mx-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-x": map-merge(
map-get($utilities, "negative-margin-x"),
(
values: map-merge(
map-get(map-get($utilities, "negative-margin-x"), "values"), (
n6: -6rem
)
)
)
)