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.

<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.

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