Spacing Utilities in Bootstrap
From the Bootstrap 5 cheat sheet · Spacing · verified Jul 2026
Spacing Utilities
Margin and padding classes
html
<!-- Padding -->
<div class="p-0">No padding</div>
<div class="p-1">Padding 1 (0.25rem)</div>
<div class="p-2">Padding 2 (0.5rem)</div>
<div class="p-3">Padding 3 (1rem)</div>
<div class="p-4">Padding 4 (1.5rem)</div>
<div class="p-5">Padding 5 (3rem)</div>
<!-- Margin -->
<div class="m-0">No margin</div>
<div class="m-1">Margin 1</div>
<div class="m-2">Margin 2</div>
<div class="m-auto">Auto margin</div>💡 Use mx-auto to center block elements horizontally
⚡ Gap utilities are better than margins for flex/grid layouts
📌 Negative margins (n1, n2, etc.) pull elements closer
🔥 All spacing utilities have responsive variants