Margin

  1. Utilities
  2. Margin
Set Margin

You can set a margin to an element instantly by using the following utilities classes.

.mg-l-20 (or) .ms-2
.mg-l-40 (or) .ms-4
Smaller Margin Value
.mg-t-[value]
.mg-r-[value]
.mg-b-[value]
.mg-l-[value]		 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.mt-[value]
.me-[value]
.mb-[value]
.ms-[value]		 0 | 1 | 2 | 3 | 4 | 5
Media Query Margin

You can also set a margin to a different media query using the following utilities classes.

Class Value
.mg-[breakpoint]-t-[value]
.mg-[breakpoint]-r-[value]
.mg-[breakpoint]-b-[value]
.mg-[breakpoint]-l-[value]

breakpoint: xs | sm | md | lg | xl

value: the margin value (refer to code above)
.mt-[breakpoint]-[value]
.me-[breakpoint]-[value]
.mb-[breakpoint]-[value]
.ms-[breakpoint]-[value]

breakpoint: xs | sm | md | lg | xl

value: the margin value (refer to code above)
Auto Margin

You can also set a margin to a different media query using the following utilities classes.

Class Value
.mg-t-auto (or) .mt-auto Set a top margin to auto
.mg-r-auto (or) .me-auto Set a right margin to auto
.mg-b-auto (or) .mb-auto Set a bottom margin to auto
.mg-l-auto (or) .ms-auto Set a left margin to auto
avatar
Reynante

Web Developer

Verified
View Profile
avatar
Joyce Chua

Team Leader

Verified
View Profile