Spacing in Bootstrap Utilities

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

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/

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.