Spacing

Assign responsive-friendly margin or padding values to an element or a subset of its sides with simple classes, based on a 5-step spacing scale.

Notation

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query.

The classes are named using the format {property}{sides}-{size}:

<div class="mt-3">margin-top 1rem</div>
<div class="px-2">padding-left/right</div>
<div class="me-4">margin-end (right)</div>
<div class="pb-5">padding-bottom</div>

Negative margin

Negative margin works exactly as positive, using - before the size: .m-n1, .-mt-2 naming (mt-n2, mx-n3, etc.). Works for m, mx, my, mt, me, mb, ms.

<div class="mt-n3">Negative top margin (12px)</div>

Responsive

Add the breakpoint suffix to apply only from that breakpoint up: .mt-md-4, .px-lg-3, .py-xl-0, .ms-xxl-2.

<div class="mt-2 mt-md-4 mt-lg-0">Responsive spacing</div>

The scale

The $boodoo-spacers map defines a 0–5 (plus 0.5–10) scale. Here are the base steps:

Extend the $boodoo-spacers map in your Sass to add custom steps:

$boodoo-spacers: map.merge($boodoo-spacers, (
  6: $boodoo-spacer * 6.5,
));