Space Utilities

Spacing (margin and padding) can be applied with utility classes that target any and all sides of an element.

The classes are named using the format: {property}-{sides}-{size}

Where property is one of:

• m - set margin
• p - set padding

Where sides is one of:

• t - apply on the top of the element
• b - apply on the bottom of the element
• l - apply on the left of the element
• r - apply on the right of the element
• x - apply on the left and right of the element
• y - apply on the top and bottom of the element
• a - apply on all 4 sides of the element

Where size is one of:

• 0 - set value to zero (0)
• sm - set value to 0.5rem (8px) (1/2 column gutter)
• 1 - set value to 0.75rem (12px) (0.75rem × 1)
• grid - set value to 1rem (16px) (full column gutter)
• 2 - set value to 1.5rem (24px) (0.75rem × 2)
• 3 - set value to 2.25rem (36px) (0.75rem × 3)
• 4 - set value to 3rem (48px) (0.75rem × 4)
• 5 - set value to 3.75rem (60px) (0.75rem × 5)

Additionally we include an .m-x-auto class which sets the horizontal margins to auto.

Note: These are all based on our current $spacer and $spacer-grid values of 1.5rem and rem, respectively.

Examples

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-1 {
  margin-left: 0.75rem !important;
}

.m-b-sm {
  margin-bottom: 0.5rem !important;
}

.p-x-2 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.p-y-grid {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-a-3 {
  padding: 2.25rem !important;
}