Spacing

Spacing classes are named using the format {property}{side}-{spacer}.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where side is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element

Where spacer is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - for classes that set the margin or padding to $spacer * .25
• 2 - for classes that set the margin or padding to $spacer * .5
• 3 - for classes that set the margin or padding to $spacer
• 4 - for classes that set the margin or padding to $spacer * 1.5
• 5 - for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

$spacer is default to 1rem, you can change or add new entries to the $spacers Sass map variable.

Examples

<div class="mt-2"></div>
<div style="margin-top: ($spacer * .5)"></div>

<div class="mx-3"></div>
<div class="margin-left: $spacer; margin-right: $spacer;"></div>

<div class="p-4"></div>
<div class="padding: ($spacer * 1.5);"></div>