Spacing
Notation
{property}{sides}-{size} for all breakpoints
{property}{sides}-{breakpoint}-{size} for specific breakpoints and up
Properties:
m - margin
p - padding
Sides:
t - top
e - right (end)
b - bottom
s - left (start)
x - left and right
y - top and bottom
[blank] - all four sides
Breakpoints:
sm - small
md - medium
lg - large
xl - extra large
xxl - extra extra large
Sizes:
0 - 0
1 - 0.25rem
2 - 0.5rem
3 - 1rem
4 - 1.5rem
5 - 3rem
auto - auto (only for margins)
n1 - -0.25rem (only for margins and disabled by default)
n2 - -0.5rem (only for margins and disabled by default)
n3 - -1rem (only for margins and disabled by default)
n4 - -1.5rem (only for margins and disabled by default)
n5 - -3rem (only for margins and disabled by default)
Margin
Top
mt-1
mt-2
mt-3
mt-4
mt-5
Right
me-1
me-2
me-3
me-4
me-5
Bottom
mb-1
mb-2
mb-3
mb-4
mb-5
Left
ms-1
ms-2
ms-3
ms-4
ms-5
Horizontal
mx-1
mx-2
mx-3
mx-4
mx-5
Vertical
my-1
my-2
my-3
my-4
my-5
All sides
m-1
m-2
m-3
m-4
m-5
Auto margin examples
Auto margin left
ms-auto
Horizontal centering
mx-auto
Padding
Top
pt-1
pt-2
pt-3
pt-4
pt-5
Right
pe-1
pe-2
pe-3
pe-4
pe-5
Bottom
pb-1
pb-2
pb-3
pb-4
pb-5
Left
ps-1
ps-2
ps-3
ps-4
ps-5
Horizontal
px-1
px-2
px-3
px-4
px-5
Vertical
py-1
py-2
py-3
py-4
py-5
All sides
p-1
p-2
p-3
p-4
p-5
Responsive examples
Margin
ms-0
ms-sm-1
ms-md-2
ms-lg-3
ms-xl-4
ms-xxl-5
Padding
ps-0
ps-sm-1
ps-md-3
ps-lg-3
ps-xl-4
ps-xxl-5
Gap
Gap size 1
Grid item 1
Grid item 2
Grid item 3
Gap size 2
Grid item 1
Grid item 2
Grid item 3
Gap size 3
Grid item 1
Grid item 2
Grid item 3
Gap size 4
Grid item 1
Grid item 2
Grid item 3
Gap size 5
Grid item 1
Grid item 2
Grid item 3