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.
mr-gs
mr-5
mr-4
mr-3
mr-2
mr-1
| Class Reference | Size | Note |
|---|---|---|
.m-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply margin around to the element |
.ml-{size}.mr-{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 |
.ml-{screen}-{size}.mr-{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.
|
||
Uses Example
<div class="m-2"> ... </div> <div class="m-lg-2"> ... </div> <div class="ml-lg-3 ml-sm-2"> ... </div>
Set Padding
These utility classes allow to set inside padding to an element.
p-1
p-2
p-3
p-4
p-5
p-gs
| Class Reference | Size | Note |
|---|---|---|
.p-{size} |
0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply padding around to the element |
.pl-{size}.pr-{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 |
.pl-{screen}-{size}.pr-{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.
|
||
Uses Example
<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. |
Uses Example
<div class="gap"></div> <div class="gap gap-sm"></div> <div class="gap gap-20px"></div>