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
Right
Bottom
Left
Horizontal
Vertical
All sides
<h4 class="h5 text-muted mt-3">Top</h4>
<h4 class="h5 text-muted mt-3">Right</h4>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<h4 class="h5 text-muted mt-3">Left</h4>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<h4 class="h5 text-muted mt-3">All sides</h4><h4 class="h5 text-muted mt-3">Top</h4>
<h4 class="h5 text-muted mt-3">Right</h4>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<h4 class="h5 text-muted mt-3">Left</h4>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<h4 class="h5 text-muted mt-3">All sides</h4>
Auto margin examples
Auto margin left
Horizontal centering
<h4 class="h5 text-muted mt-3">Auto margin left</h4>
<h4 class="h5 text-muted mt-3">Horizontal centering</h4><h4 class="h5 text-muted mt-3">Auto margin left</h4>
<h4 class="h5 text-muted mt-3">Horizontal centering</h4>
Padding
Top
Right
Bottom
Left
Horizontal
Vertical
All sides
<h4 class="h5 text-muted mt-3">Top</h4>
<h4 class="h5 text-muted mt-3">Right</h4>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<h4 class="h5 text-muted mt-3">Left</h4>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<h4 class="h5 text-muted mt-3">All sides</h4><h4 class="h5 text-muted mt-3">Top</h4>
<h4 class="h5 text-muted mt-3">Right</h4>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<h4 class="h5 text-muted mt-3">Left</h4>
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<h4 class="h5 text-muted mt-3">All sides</h4>
Responsive examples
Margin
Padding
<h4 class="h5 text-muted mt-3">Margin</h4>
<h4 class="h5 text-muted mt-3">Padding</h4><h4 class="h5 text-muted mt-3">Margin</h4>
<h4 class="h5 text-muted mt-3">Padding</h4>
Gap
Gap size 1
Gap size 2
Gap size 3
Gap size 4
Gap size 5
<h4 class="h5 text-muted mt-3">Gap size 1</h4>
<h4 class="h5 text-muted mt-3">Gap size 2</h4>
<h4 class="h5 text-muted mt-3">Gap size 3</h4>
<h4 class="h5 text-muted mt-3">Gap size 4</h4>
<h4 class="h5 text-muted mt-3">Gap size 5</h4><h4 class="h5 text-muted mt-3">Gap size 1</h4>
<h4 class="h5 text-muted mt-3">Gap size 2</h4>
<h4 class="h5 text-muted mt-3">Gap size 3</h4>
<h4 class="h5 text-muted mt-3">Gap size 4</h4>
<h4 class="h5 text-muted mt-3">Gap size 5</h4>