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
<h4 class="h5 text-muted mt-3">Top</h4>
<div>mt-1</div>
<div>mt-2</div>
<div>mt-3</div>
<div>mt-4</div>
<div>mt-5</div>
<h4 class="h5 text-muted mt-3">Right</h4>
<div>me-1</div>
<div>me-2</div>
<div>me-3</div>
<div>me-4</div>
<div>me-5</div>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<div>mb-1</div>
<div>mb-2</div>
<div>mb-3</div>
<div>mb-4</div>
<div>mb-5</div>
<h4 class="h5 text-muted mt-3">Left</h4>
<div>ms-1</div>
<div>ms-2</div>
<div>ms-3</div>
<div>ms-4</div>
<div>ms-5</div>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div>mx-1</div>
<div>mx-2</div>
<div>mx-3</div>
<div>mx-4</div>
<div>mx-5</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div>my-1</div>
<div>my-2</div>
<div>my-3</div>
<div>my-4</div>
<div>my-5</div>
<h4 class="h5 text-muted mt-3">All sides</h4>
<div>m-1</div>
<div>m-2</div>
<div>m-3</div>
<div>m-4</div>
<div>m-5</div><h4 class="h5 text-muted mt-3">Top</h4>
<div>mt-1</div>
<div>mt-2</div>
<div>mt-3</div>
<div>mt-4</div>
<div>mt-5</div>
<h4 class="h5 text-muted mt-3">Right</h4>
<div>me-1</div>
<div>me-2</div>
<div>me-3</div>
<div>me-4</div>
<div>me-5</div>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<div>mb-1</div>
<div>mb-2</div>
<div>mb-3</div>
<div>mb-4</div>
<div>mb-5</div>
<h4 class="h5 text-muted mt-3">Left</h4>
<div>ms-1</div>
<div>ms-2</div>
<div>ms-3</div>
<div>ms-4</div>
<div>ms-5</div>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div>mx-1</div>
<div>mx-2</div>
<div>mx-3</div>
<div>mx-4</div>
<div>mx-5</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div>my-1</div>
<div>my-2</div>
<div>my-3</div>
<div>my-4</div>
<div>my-5</div>
<h4 class="h5 text-muted mt-3">All sides</h4>
<div>m-1</div>
<div>m-2</div>
<div>m-3</div>
<div>m-4</div>
<div>m-5</div>
Auto margin examples
Auto margin left
ms-auto
Horizontal centering
mx-auto
<h4 class="h5 text-muted mt-3">Auto margin left</h4>
<div class="w-50">ms-auto</div>
<h4 class="h5 text-muted mt-3">Horizontal centering</h4>
<div class="w-50">mx-auto</div><h4 class="h5 text-muted mt-3">Auto margin left</h4>
<div class="w-50">ms-auto</div>
<h4 class="h5 text-muted mt-3">Horizontal centering</h4>
<div class="w-50">mx-auto</div>
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
<h4 class="h5 text-muted mt-3">Top</h4>
<div>pt-1</div>
<div>pt-2</div>
<div>pt-3</div>
<div>pt-4</div>
<div>pt-5</div>
<h4 class="h5 text-muted mt-3">Right</h4>
<div>pe-1</div>
<div>pe-2</div>
<div>pe-3</div>
<div>pe-4</div>
<div>pe-5</div>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<div>pb-1</div>
<div>pb-2</div>
<div>pb-3</div>
<div>pb-4</div>
<div>pb-5</div>
<h4 class="h5 text-muted mt-3">Left</h4>
<div>ps-1</div>
<div>ps-2</div>
<div>ps-3</div>
<div>ps-4</div>
<div>ps-5</div>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div>px-1</div>
<div>px-2</div>
<div>px-3</div>
<div>px-4</div>
<div>px-5</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div>py-1</div>
<div>py-2</div>
<div>py-3</div>
<div>py-4</div>
<div>py-5</div>
<h4 class="h5 text-muted mt-3">All sides</h4>
<div>p-1</div>
<div>p-2</div>
<div>p-3</div>
<div>p-4</div>
<div>p-5</div><h4 class="h5 text-muted mt-3">Top</h4>
<div>pt-1</div>
<div>pt-2</div>
<div>pt-3</div>
<div>pt-4</div>
<div>pt-5</div>
<h4 class="h5 text-muted mt-3">Right</h4>
<div>pe-1</div>
<div>pe-2</div>
<div>pe-3</div>
<div>pe-4</div>
<div>pe-5</div>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<div>pb-1</div>
<div>pb-2</div>
<div>pb-3</div>
<div>pb-4</div>
<div>pb-5</div>
<h4 class="h5 text-muted mt-3">Left</h4>
<div>ps-1</div>
<div>ps-2</div>
<div>ps-3</div>
<div>ps-4</div>
<div>ps-5</div>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div>px-1</div>
<div>px-2</div>
<div>px-3</div>
<div>px-4</div>
<div>px-5</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div>py-1</div>
<div>py-2</div>
<div>py-3</div>
<div>py-4</div>
<div>py-5</div>
<h4 class="h5 text-muted mt-3">All sides</h4>
<div>p-1</div>
<div>p-2</div>
<div>p-3</div>
<div>p-4</div>
<div>p-5</div>
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
<h4 class="h5 text-muted mt-3">Margin</h4>
<div>ms-0</div>
<div>ms-sm-1</div>
<div>ms-md-2</div>
<div>ms-lg-3</div>
<div>ms-xl-4</div>
<div>ms-xxl-5</div>
<h4 class="h5 text-muted mt-3">Padding</h4>
<div>ps-0</div>
<div>ps-sm-1</div>
<div>ps-md-3</div>
<div>ps-lg-3</div>
<div>ps-xl-4</div>
<div>ps-xxl-5</div><h4 class="h5 text-muted mt-3">Margin</h4>
<div>ms-0</div>
<div>ms-sm-1</div>
<div>ms-md-2</div>
<div>ms-lg-3</div>
<div>ms-xl-4</div>
<div>ms-xxl-5</div>
<h4 class="h5 text-muted mt-3">Padding</h4>
<div>ps-0</div>
<div>ps-sm-1</div>
<div>ps-md-3</div>
<div>ps-lg-3</div>
<div>ps-xl-4</div>
<div>ps-xxl-5</div>
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
<h4 class="h5 text-muted mt-3">Gap size 1</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 2</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 3</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 4</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 5</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div><h4 class="h5 text-muted mt-3">Gap size 1</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 2</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 3</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 4</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
<h4 class="h5 text-muted mt-3">Gap size 5</h4>
<div>
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>