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>