The classes are named using the format
{property}{sides}-{size}
forxs
and{property}{sides}-{breakpoint}-{size}
forsm
,md
,lg
, andxl
.
Examples
.mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }
Horizontal centering
<div class="mx-auto" style="width: 200px;"> Centered element </div>
Negative margin
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n
before the requested size
.mt-n1 { margin-top: -0.25rem !important; }
References
https://getbootstrap.com/docs/4.3/utilities/spacing/