📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials Bootstrap 5 Spacing Utilities

Spacing Utilities

4 min read Quiz at the end
Control spacing with m-*, p-*, mx-auto, mt-4, px-3, and responsive variants like mt-md-5.

Spacing Utilities

<!-- Pattern: {property}{sides}-{size}
Property: m=margin, p=padding
Sides: t=top, b=bottom, s=start, e=end, x=horizontal, y=vertical
Size: 0,1,2,3,4,5 (0 to 3rem) or auto -->

<div class="mt-3">margin-top: 1rem</div>
<div class="mb-4">margin-bottom: 1.5rem</div>
<div class="mx-auto">horizontal auto margin (center)</div>
<div class="my-5">vertical margin: 3rem</div>
<div class="p-3">padding: 1rem all sides</div>
<div class="px-4 py-2">horizontal 1.5rem, vertical 0.5rem</div>
<div class="ms-auto">margin-start auto (push right)</div>
<div class="p-0">no padding</div>
<div class="m-0">no margin</div>

<!-- Responsive spacing -->
<div class="mt-2 mt-md-4 mt-lg-5">