Spacings
Apply margin and padding utility classes to elements.
Default
Use spacing utilities to apply margin or padding to elements.
p-1
p-2
p-3
p-4
<div class="p-1 border border-primary">p-1</div>
<div class="p-2 border border-primary">p-2</div>
<div class="p-3 border border-primary">p-3</div>
<div class="p-4 border border-primary">p-4</div>Margin
Apply margin to all sides of an element.
m-1
m-2
m-3
<div class="m-1 p-2 border border-secondary">m-1</div>
<div class="m-2 p-2 border border-secondary">m-2</div>
<div class="m-3 p-2 border border-secondary">m-3</div>Padding
Apply padding to all sides of an element.
p-1
p-2
p-3
<div class="p-1 border border-primary">p-1</div>
<div class="p-2 border border-primary">p-2</div>
<div class="p-3 border border-primary">p-3</div>Directions
Apply margin or padding to a specific direction.
mt-3
me-3
mb-3
ms-3
<div class="mt-3 p-2 border border-primary">mt-3</div>
<div class="me-3 p-2 border border-primary">me-3</div>
<div class="mb-3 p-2 border border-primary">mb-3</div>
<div class="ms-3 p-2 border border-primary">ms-3</div>Axis
Apply spacing to the horizontal or vertical axis.
mx-3
my-3
px-3
py-3
<div class="mx-3 p-2 border border-primary">mx-3</div>
<div class="my-3 p-2 border border-primary">my-3</div>
<div class="px-3 border border-primary">px-3</div>
<div class="py-3 border border-primary">py-3</div>Auto margins
Use auto margin utilities to align elements.
mx-auto w-50
<div class="mx-auto p-2 border border-primary w-50">mx-auto w-50</div>Responsive variants
Use responsive spacing utilities to change spacing at different breakpoints.
p-2 p-md-3 p-lg-4
<div class="p-2 p-md-3 p-lg-4 border border-primary">p-2 p-md-3 p-lg-4</div>Examples
Combine spacing utilities with layout utilities.
Item 1
Item 2
Item 3
<div class="d-flex flex-column gap-2">
<div class="p-2 border border-primary">Item 1</div>
<div class="p-2 border border-primary">Item 2</div>
<div class="p-2 border border-primary">Item 3</div>
</div>