Setting a Margin

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

Class Reference

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

Bigger Margin	Value
.mg-t-[value] .mg-r-[value] .mg-b-[value] .mg-l-[value]	15 | 20 | 25 | 30 | ... | 120   (step of 5)

Media Query Margin

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

Sample Code

<div class="mg-t-50 mg-md-t-60 mg-lg-t-100"></div>

Class Reference

Class	Value
.mg-[size]-t-[value] .mg-[size]-r-[value] .mg-[size]-b-[value] .mg-[size]-l-[value]	size: xs | sm | md | lg | xl value: the margin value (refer to code above)

Margin Auto

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

Class Reference

Class	Value
.mg-t-auto	Set a top margin to auto
.mg-r-auto	Set a right margin to auto
.mg-b-auto	Set a bottom margin to auto
.mg-l-auto	Set a left margin to auto