Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Spacing Notation

Property Sides Sizes
m = margin
p = padding 		t = top
b = bottom
s = start (left)
e = end (right)
x = left & right
y = top & bottom
blank = all 4 sides 		0 = 0
1 = 0.25rem
2 = 0.5rem
3 = 1rem
4 = 1.5rem
5 = 3rem
auto = auto

Margin

m-0 — margin: 0
m-1 — margin: 0.25rem
m-2 — margin: 0.5rem
m-3 — margin: 1rem
mt-3 — margin-top: 1rem
mx-4 — margin x: 1.5rem
my-2 — margin y: 0.5rem 
																				<div class="m-0">...</div>
<div class="m-1">...</div>
<div class="m-2">...</div>
<div class="m-3">...</div>
<div class="mt-3">...</div>
<div class="mb-3">...</div>
<div class="ms-3">...</div>
<div class="me-3">...</div>
<div class="mx-3">...</div>
<div class="my-3">...</div>

Padding

p-0
p-1
p-2
p-3
p-4
p-5 
																				<div class="p-0">...</div>
<div class="p-1">...</div>
<div class="p-2">...</div>
<div class="p-3">...</div>
<div class="pt-3">...</div>
<div class="pb-3">...</div>
<div class="ps-3">...</div>
<div class="pe-3">...</div>
<div class="px-3">...</div>
<div class="py-3">...</div>

Gap

gap-1

Item
Item
Item

gap-3

Item
Item
Item

gap-5

Item
Item
Item
																				<div class="d-flex gap-0">...</div>
<div class="d-flex gap-1">...</div>
<div class="d-flex flex-wrap gap-2">...</div>
<div class="d-flex gap-3">...</div>
<div class="d-flex gap-4">...</div>
<div class="d-flex gap-5">...</div>

Auto Margins

me-auto
item
item
item
item
ms-auto
mb-auto
item
																				<div class="d-flex">
  <div class="me-auto">me-auto</div>
  <div>item</div>
  <div>item</div>
</div>
<div class="d-flex">
  <div>item</div>
  <div>item</div>
  <div class="ms-auto">ms-auto</div>
</div>