| Size | Unit |
|---|---|
| 0 | 0rem; |
| 1 | 0.25rem; |
| 2 | 0.5rem; |
| 3 | 1rem; |
| 4 | 1.5rem; |
| 5 | 3rem; |
Control the padding on one side of an element using the p{t|r|b|l|x|y}-{size} utilities.
For example, pt-1 would add 0.5rem of padding to the top of an element, pr-4 would add 1.5rem of padding to the right of an element, pb-3 would add 1rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.
pt-5
pr-5
pb-5
pl-5
Target
Target
Target
Target
Control the horizontal padding of an element using the px-{size} utilities.
px-5
Target
Control the vertical padding of an element using the py-{size} utilities.
py-5
Target
Control the padding on all sides of an element using the p-{size} utilities.
p-5
Target
| Size | Unit |
|---|---|
| 0 | 0rem; |
| 1 | 0.25rem; |
| 2 | 0.5rem; |
| 3 | 1rem; |
| 4 | 1.5rem; |
| 5 | 3rem; |
Control the margin on one side of an element using the m{t|r|b|l|x|y}-{size} utilities.
For example, mt-4 would add 1.5rem of margin to the top of an element, mr-3 would add 1rem of margin to the right of an element, mb-4 would add 1.5rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.
mt-5
mr-5
mb-5
ml-5
Target
Target
Target
Target
Control the horizontal margin of an element using the mx-{size} utilities.
mx-5
Target
Control the vertical margin of an element using the my-{size} utilities.
my-5
Target
Control the margin on all sides of an element using the m-{size} utilities.
m-5
Target
Spacing utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.
As such, the classes are named using the format:
m{t|r|b|l|x|y}-{breakpoint}-{value} for sm, md, lg,and xl.p{t|r|b|l|x|y}-{breakpoint}-{value} for sm, md, lg,and xl.m-{breakpoint}-{value} for sm, md, lg,and xl.p-{breakpoint}-{value} for sm, md, lg,and xl.Where value is one of: 0-5 and auto
Designed and built with ♥ by Rume Aluya.