Spacing Utility
A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Mostly use for cards, buttons, or any other element.
Size Reference
This will guide you how much space used in
{size}
| Reference | Value | Details |
|---|---|---|
{size} |
0 1 2 3 4 5 gs |
0rem as
0px0.375rem as
6px0.75rem as
12px1.0rem as
16px1.5rem as
24px2.75rem as
44px28px as
gutter size
|
| Note: Base font size is 16px and 1rem equal to 16px | ||
Set Margin
These utility classes allow to set margin to an element.
| Class Reference | Size | Note |
|---|---|---|
.m-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply margin around to the element |
.ms-{size}.me-{size}.mt-{size}.mb-{size}
|
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply margin on specific side of the element |
.m-{screen}-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto |
Use {screen} as
sm | md | lg | xl
|
.ms-{screen}-{size}.me-{screen}-{size}.mt-{screen}-{size}.mb-{screen}-{size}
|
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Same as above |
{screen} related with breakpoint
and apply from the {screen} you
have use. For example,
.m-sm-2 sets margin on
sm screen and continue to above
screens.
|
||
<div class="m-2"> ... </div> <div class="m-lg-2"> ... </div> <div class="ms-lg-3 ms-sm-2"> ... </div>
Set Padding
These utility classes allow to set inside padding to an element.
| Class Reference | Size | Note |
|---|---|---|
.p-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply padding around to the element |
.ps-{size}.pe-{size}.pt-{size}.pb-{size}
|
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply padding on specific side of the element |
.p-{screen}-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto |
Use {screen} as
sm, md, lg, xl
|
.ps-{screen}-{size}.pe-{screen}-{size}.pt-{screen}-{size}.pb-{screen}-{size}
|
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Same as above |
{screen} related with breakpoint
and will apply from the
{screen} to above. For example,
.m-sm-2 sets padding on
sm screen and continue to above
screens.
|
||
<div class="p-2"> ... </div> <div class="p-lg-2"> ... </div> <div class="p-lg-3 p-sm-2"> ... </div>
Gaps Classes
The gap 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.
|
<div class="gap"></div> <div class="gap gap-sm"></div> <div class="gap gap-20px"></div>
