Spacing Utilities

Bullframe CSS provides margin and padding utilities for consistent spacing throughout your design.

Margin Utilities

All Sides

<div class="bf-m-0">No margin</div>
<div class="bf-m-1">Small margin</div>
<div class="bf-m-2">Medium margin</div>
<div class="bf-m-3">Large margin</div>
<div class="bf-m-4">Extra large margin</div>

Top Margin

<div class="bf-m-t-0">No top margin</div>
<div class="bf-m-t-1">Small top margin</div>
<div class="bf-m-t-2">Medium top margin</div>
<div class="bf-m-t-3">Large top margin</div>
<div class="bf-m-t-4">Extra large top margin</div>

Bottom Margin

<div class="bf-m-b-0">No bottom margin</div>
<div class="bf-m-b-1">Small bottom margin</div>
<div class="bf-m-b-2">Medium bottom margin</div>
<div class="bf-m-b-3">Large bottom margin</div>
<div class="bf-m-b-4">Extra large bottom margin</div>

Left Margin

<div class="bf-m-l-0">No left margin</div>
<div class="bf-m-l-1">Small left margin</div>
<div class="bf-m-l-2">Medium left margin</div>

Right Margin

<div class="bf-m-r-0">No right margin</div>
<div class="bf-m-r-1">Small right margin</div>
<div class="bf-m-r-2">Medium right margin</div>

Padding Utilities

All Sides

<div class="bf-p-0">No padding</div>
<div class="bf-p-1">Small padding</div>
<div class="bf-p-2">Medium padding</div>
<div class="bf-p-3">Large padding</div>
<div class="bf-p-4">Extra large padding</div>

Top Padding

<div class="bf-p-t-0">No top padding</div>
<div class="bf-p-t-1">Small top padding</div>
<div class="bf-p-t-2">Medium top padding</div>

Bottom Padding

<div class="bf-p-b-0">No bottom padding</div>
<div class="bf-p-b-1">Small bottom padding</div>
<div class="bf-p-b-2">Medium bottom padding</div>

Spacing Scale

The spacing utilities use the following scale:

• 0 = 0
• 1 = --bf-spacing-md (0.5rem)
• 2 = --bf-spacing-lg (1rem)
• 3 = --bf-spacing-xl (2rem)
• 4 = --bf-spacing-xxl (3rem)