Margin Complete

Margin utility for adjusting spacing on-the-fly

Usage

Use the margin utility in combination with other classes to achieve the desired margin on an element.

If you are frequently repeating a pattern that uses the margin utility, consider moving the margin rule into the component class.

Class Name Description
m-{xs,sm,md,lg,xl}

apply a overall margin of size {xs,sm,md,lg,xl}.
m-top-{xs,sm,md,lg,xl}

apply a top margin of size {xs,sm,md,lg,xl}.
m-bottom-{xs,sm,md,lg,xl}

apply a bottom margin of size {xs,sm,md,lg,xl}.
m-right-{xs,sm,md,lg,xl}

apply a right margin of size {xs,sm,md,lg,xl}.
m-left-{xs,sm,md,lg,xl}

apply a left margin of size {xs,sm,md,lg,xl}.
mx-{xs,sm,md,lg,xl}

apply a left and right margin of size {xs,sm,md,lg,xl}.
my-{xs,sm,md,lg,xl}

apply a top and bottom margin of size {xs,sm,md,lg,xl}.