Spacing

Assign margin or padding to an element or a subset of its sides with shorthand classes.

Margin and padding

The classes are named using the format: {property}{sides}-{size}

Where property is one of:

  • m for classes that set margin
  • p for classes that set padding

Where sides is one of:

  • t set margin-top or padding-top
  • b set margin-bottom or padding-bottom
  • l set margin-left or padding-left
  • r set margin-right or padding-right
  • x set both *-left and *-right
  • y set both *-top and *-bottom
  • Not specify letter to set all 4 sides

Where size are multiples on the global default value, 1rem:

  • 0 eliminate the margin or padding
  • 1 set property to .5rem = 8px
  • 2 set property to 1rem = 16px
  • 3 set property to 1.5rem = 24px
  • 4 set property to 3rem = 48px
  • 5 set property to 5rem = 80px
.mt-0 { margin-top: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.pl-1 { padding-left: .5rem !important; }
.pr-2 { padding-right: 1rem !important; }
.m-2 { margin: 1rem 1rem !important; }
.m-3 { margin: 1.5rem 1.5rem !important; }
.px-4 {
  padding-left:   3rem !important;
  padding-right:  3rem !important;
}
.py-5 {
  padding-top:    5rem !important;
  padding-bottom: 5rem !important;
}

Responsive spacing

These use the same viewport width breakpoints as the grid system. The classes are named using the format: {property}{sides}-{breakpoint}-{size}

Where breakpoint is one of:

  • sm set on viewports sized small or wider
  • md set on viewports sized medium or wider
  • lg set on viewports sized large or wider
  • xl set on viewports sized extra-large or wider
  • Not specify {breakpoint} to set on all viewports sizes, like above.
small
medium
large
xlarge
<div class="py-sm-3">small</div>
<div class="py-md-3">medium</div>
<div class="py-lg-3">large</div>
<div class="py-xl-3">xlarge</div>

Horizontal centering

.mx-auto class for horizontally centering fixed-width block level content.

Centered element
<div class="mx-auto" style="width: 200px">
  Centered element
</div>