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