Documentation - here
| Class name | Size - px | Size - rem | Visual representation |
|---|---|---|---|
.me-0 |
0px | 0rem | |
.me-1 |
4px | 0.25rem | |
.me-2 |
8px | 0.5rem | |
.me-3 |
16px | 1rem | |
.me-4 |
20px | 1.25rem | |
.me-5 |
24px | 1.5rem | |
.me-6 |
32px | 2rem | |
.me-7 |
40px | 2.5rem | |
.me-8 |
48px | 3rem | |
.me-9 |
56px | 3.5rem | |
.me-10 |
64px | 4rem | |
.me-11 |
80px | 5rem | |
.me-12 |
96px | 6rem | |
.me-13 |
128px | 8rem | |
.me-14 |
160px | 10rem | |
.me-15 |
192px | 12rem | |
.me-16 |
224px | 14rem | |
.me-17 |
256px | 16rem |
Spacing utilities that apply to all breakpoints, from xs to xxl, 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. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.
Where property is one of:
m - for classes that set marginp - for classes that set paddingWhere sides is one of:
t - for classes that set margin-top or padding-topb - for classes that set margin-bottom or padding-bottoms - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTLe - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTLx - for classes that set both *-left and *-righty - for classes that set both *-top and *-bottommargin or padding on all 4 sides of the elementWhere size is one of the sizes defined in the table above.