MARGINS
  1. Utilities
  2. Margins
Margin Values
.mg-0
.mg-10
.mg-20
Classes .mg-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-top Values
.mg-t-0
.mg-t-20
.mg-t-40
Classes .mg-t-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-right Values
.mg-e-20
.mg-e-40
.mg-e-0
Classes .mg-e-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-bottom Values
.mg-b-0
.mg-b-20
.mg-b-40
Classes .mg-b-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-left Values
.mg-s-0
.mg-s-20
.mg-s-40
Classes .mg-s-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-x Values
.mg-x-0
.mg-x-20
.mg-x-40
Classes .mg-x-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Margin-y Values
.mg-y-0
.mg-y-20
.mg-y-40
Classes .mg-y-[value]
Values 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Media Query Margin
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)
Auto Margin
Class Value
.mg-t-auto Set a top margin to auto
.mg-e-auto Set a right margin to auto
.mg-b-auto Set a bottom margin to auto
.mg-x-auto Set x-axis margin to auto
.mg-y-auto Set y-axis margin to auto
.mg-s-auto Set a left margin to auto