Utilities
Spacing
Margin and padding helpers tied to the spacing scale.
Scale
The spacing scale is a quarter-rem ladder:
| Token | Value |
|---|---|
--b-0 | 0 |
--b-px | 1px |
--b-1 | 0.25rem |
--b-2 | 0.5rem |
--b-3 | 0.75rem |
--b-4 | 1rem |
--b-5 | 1.25rem |
--b-6 | 1.5rem |
--b-8 | 2rem |
--b-10 | 2.5rem |
--b-12 | 3rem |
--b-16 | 4rem |
--b-20 | 5rem |
--b-24 | 6rem |
Margin
m-{0,1,2,3,4,6,8,auto}, mx-{...}, my-{...}, mt-{...}, mb-{...}, ms-{...}, me-{...}.
Padding
p-{0…10}, px-{...}, py-{...}, pt-{...}, pb-{...}.
Gap
gap-{0…12}, gap-x-{2,4}, gap-y-{2,4}.
A
B
C
<div class="d-flex gap-3 p-4 bg-surface rounded-lg">
<div class="b-card"><div class="b-card-body p-3">A</div></div>
<div class="b-card"><div class="b-card-body p-3">B</div></div>
<div class="b-card"><div class="b-card-body p-3">C</div></div>
</div>Logical properties
All spacing utilities use logical properties (margin-block-start, padding-inline) so they work in RTL contexts automatically.