Assign margin or padding to an element or a subset of its sides with shorthand classes.
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
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;
}
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 widermd
set on viewports sized medium or widerlg
set on viewports sized large or widerxl
set on viewports sized extra-large or wider{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>
.mx-auto
class for horizontally centering fixed-width block level content.
<div class="mx-auto" style="width: 200px">
Centered element
</div>