Utilities - Spacing

You can use a wide range of responsive margin and padding utility classes to modify an element’s appearance.

The spacing utility classes are named using the following format:

  • ._{property}:{size}
  • ._{property}-{sides}:{size}
  • ._{breakpoint}:{property}-{sides}:{size}

Where property is one of:

  • margin
  • padding

Where sides is one of:

  • top for top side
  • right for right side
  • bottom for bottom side
  • left for left side
  • x for horizontal (left and right) sides
  • y from vertical (top and bottom) sides
  • none for classes that set a margin or padding on all 4 sides

Where size is one of:

  • 0 for eliminating margin or padding
  • 1 for classes setting margin or padding to $spacing * 1
  • 2 for classes setting margin or padding to $spacing * 2
  • 3 for classes setting margin or padding to $spacing * 3
  • 4 for classes setting margin or padding to $spacing * 4
  • 5 for classes setting margin or padding to $spacing * 5
  • 6 for classes setting margin or padding to $spacing * 6
  • 7 for classes setting margin or padding to $spacing * 7
  • 8 for classes setting margin or padding to $spacing * 8
  • 1/2 for classes setting margin or padding to $spacing * 1/2
  • 1/3 for classes setting margin or padding to $spacing * 1/3
  • 2/3 for classes setting margin or padding to $spacing * 2/3
  • 1/4 for classes setting margin or padding to $spacing * 1/4
  • 3/4 for classes setting margin or padding to $spacing * 3/4
  • auto for classes setting margin or padding to auto

And breakpoint is one of:

  • xs
  • sm
  • md
  • lg
  • xl
  • xxl

You can add more sizes by adding entries to the $spacings Sass variable.

Basic Example

Here are some examples of these utility classes:

<div class="_margin-top:0"></div>

<div class="_margin-top:1/4"></div>

<div class="_margin-top:1/3"></div>

<div class="_margin-top:1/2"></div>

<div class="_margin-top:2/3"></div>

<div class="_margin-top:3/4"></div>

<div class="_margin-top:1"></div>

<div class="_margin-top:2"></div>

<div class="_margin-top:3"></div>

<div class="_margin-top:4"></div>

<div class="_margin-top:5"></div>

<div class="_margin-top:6"></div>

<div class="_margin-top:7"></div>

<div class="_margin-top:8"></div>

<div class="_margin-bottom:0"></div>

<div class="_margin-bottom:1/4"></div>

<div class="_margin-bottom:1/3"></div>

<div class="_margin-bottom:1/2"></div>

<div class="_margin-bottom:2/3"></div>

<div class="_margin-bottom:3/4"></div>

<div class="_margin-bottom:1"></div>

<div class="_margin-bottom:2"></div>

<div class="_margin-bottom:3"></div>

<div class="_margin-bottom:4"></div>

<div class="_margin-bottom:5"></div>

<div class="_margin-bottom:6"></div>

<div class="_margin-bottom:7"></div>

<div class="_margin-bottom:8"></div>

<div class="_margin-left:0"></div>

<div class="_margin-left:1/4"></div>

<div class="_margin-left:1/3"></div>

<div class="_margin-left:1/2"></div>

<div class="_margin-left:2/3"></div>

<div class="_margin-left:3/4"></div>

<div class="_margin-left:1"></div>

<div class="_margin-left:2"></div>

<div class="_margin-left:3"></div>

<div class="_margin-left:4"></div>

<div class="_margin-left:5"></div>

<div class="_margin-left:6"></div>

<div class="_margin-left:7"></div>

<div class="_margin-left:8"></div>

<div class="_margin-right:0"></div>

<div class="_margin-right:1/4"></div>

<div class="_margin-right:1/3"></div>

<div class="_margin-right:1/2"></div>

<div class="_margin-right:2/3"></div>

<div class="_margin-right:3/4"></div>

<div class="_margin-right:1"></div>

<div class="_margin-right:2"></div>

<div class="_margin-right:3"></div>

<div class="_margin-right:4"></div>

<div class="_margin-right:5"></div>

<div class="_margin-right:6"></div>

<div class="_margin-right:7"></div>

<div class="_margin-right:8"></div>

Horizontal Centering

You can set a left and right margin using the x side parameter, such as _margin-x:auto. The _margin-x:auto class is useful for horizontally centering fixed-width block level content.

Horizontally Centered
<div class="_margin-x:auto" style="max-width: 240px;">Horizontally Centered</div>