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}

ReferenceValueDetails
{size}0
1
2
3
4
5
gs
0rem as 0px
0.375rem as 6px
0.75rem as 12px
1.0rem as 16px
1.5rem as 24px
2.75rem as 44px
28px 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.

me-gs
me-5
me-4
me-3
me-2
me-1
Class ReferenceSizeNote
.m-{size}0 | 1 | 2 | 3 | 4 | 5 | gs | autoApply margin around to the element
.ms-{size}
.me-{size}
.mt-{size}
.mb-{size}
0 | 1 | 2 | 3 | 4 | 5 | gs | autoApply margin on specific side of the element
.m-{screen}-{size}0 | 1 | 2 | 3 | 4 | 5 | gs | autoUse {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 | autoSame 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="ms-lg-3 ms-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 ReferenceSizeNote
.p-{size}0 | 1 | 2 | 3 | 4 | 5 | gs | autoApply padding around to the element
.ps-{size}
.pe-{size}
.pt-{size}
.pb-{size}
0 | 1 | 2 | 3 | 4 | 5 | gs | autoApply padding on specific side of the element
.p-{screen}-{size}0 | 1 | 2 | 3 | 4 | 5 | gs | autoUse {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 | autoSame 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 ReferenceValue
.gap28px as gutter size
.gap-sm0.75rem as 12px
.gap-md1.25rem as 20px
.gap-lg2rem as 32px
.gap-xl2.5rem as 40px
.gap-{num}px[10, 20, 30, 40, 50, 60, 70, 80, 90, 100] use as {num} valueFixed 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>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?