Spacing

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

Bootstrap documentation


Notation

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl. Margins and paddings are available for all four sides (top, right, bottom, left). Below are examples without indication of direction, but the same distances apply.


Margins

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 1.25rem !important; }
.m-6 { margin: 1.5rem !important; }
.m-8 { margin: 2rem !important; }
.m-10 { margin: 2.5rem !important; }
.m-12 { margin: 3rem !important; }
.m-16 { margin: 4rem !important; }
.m-20 { margin: 5rem !important; }
.m-24 { margin: 6rem !important; }
.m-32 { margin: 8rem !important; }
.m-40 { margin: 10rem !important; }
.m-48 { margin: 12rem !important; }
.m-56 { margin: 14rem !important; }
.m-64 { margin: 16rem !important; }

Paddings

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.p-12 { padding: 3rem !important; }
.p-16 { padding: 4rem !important; }
.p-20 { padding: 5rem !important; }
.p-24 { padding: 6rem !important; }
.p-32 { padding: 8rem !important; }
.p-40 { padding: 10rem !important; }
.p-48 { padding: 12rem !important; }
.p-56 { padding: 14rem !important; }
.p-64 { padding: 16rem !important; }

Max width

.mw-1 (max 20rem)
.mw-2 (max 24rem)
.mw-3 (max 28rem)
.mw-4 (max 32rem)
.mw-5 (max 36rem)
.mw-6 (max 42rem)
.mw-7 (max 48rem)
.mw-8 (max 56rem)
.mw-9 (max 64rem)
.mw-10 (max 72rem)
.mw-full (max 100%)
<div class="mw-1 mx-auto border border-theme">.mw-1 <small>(max 20rem)</small></div>
<div class="mw-2 mx-auto border border-theme">.mw-2 <small>(max 24rem)</small></div>
<div class="mw-3 mx-auto border border-theme">.mw-3 <small>(max 28rem)</small></div>
<div class="mw-4 mx-auto border border-theme">.mw-4 <small>(max 32rem)</small></div>
<div class="mw-5 mx-auto border border-theme">.mw-5 <small>(max 36rem)</small></div>
<div class="mw-6 mx-auto border border-theme">.mw-6 <small>(max 42rem)</small></div>
<div class="mw-7 mx-auto border border-theme">.mw-7 <small>(max 48rem)</small></div>
<div class="mw-8 mx-auto border border-theme">.mw-8 <small>(max 56rem)</small></div>
<div class="mw-9 mx-auto border border-theme">.mw-9 <small>(max 64rem)</small></div>
<div class="mw-10 mx-auto border border-theme">.mw-10 <small>(max 72rem)</small></div>
<div class="mw-full mx-auto border border-theme">.mw-full <small>(max 100%)</small></div>

Responsiveness

Max width dependent on viewport size.
<div class="mw-full mw-md-4 mw-lg-6 mw-xl-8 mx-auto border border-theme">
    Max width dependent on viewport size.
</div>