Other Utility Classes
Here is some other utility classes that use to quickly style an element.
Gaps Classes
The .gap utility classes allow to set
specific gap between to section or block.
| Class Reference | Value | |
|---|---|---|
.gap |
28px as
gutter size
|
|
.gap-sm |
0.75rem as
12px
|
|
.gap-md |
1.25rem as
20px
|
|
.gap-lg |
2rem as
32px
|
|
.gap-xl |
2.5rem as
40px
|
|
.gap-{num}px |
[10, 20, 30, 40, 50, 60, 70, 80, 90,
100]
use as {num} value
|
Fixed in pixel |
.gap-{size} |
[0, 1, 2, 3, 4, 5] as
{size} value
|
{size} is related to Size
reference.
|
Uses Example
<div class="gap"></div> <div class="gap gap-sm"></div> <div class="gap gap-20px"></div>
