Set padding and margins of elements using a variety of responsive utility classes.

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Spacing classes are defined using the syntax {property}{sides}-{size} on the xs breakpoint, and using {property}{sides}-{breakpoint}-{size} on sm, md, lg and xl breakpoints.

Where property is one of:

  • m - for margin
  • p - for padding

Where sides is one of:

  • t - for margin-top or padding-top
  • b - for margin-bottom or padding-bottom
  • l - for margin-left or padding-left
  • r - for margin-right or padding-right
  • x - for both left and right values
  • y - for both top and bottom values
  • blank - for margin or padding on all 4 sides

Where size is one of:

  • 0 - eliminates the margin/padding
  • 1 to 5 - where each increment represents a higher value in spacing
  • auto - sets the value to auto.

Examples of these classes are .px-5, .mt-5, .m-lg-3 and .py-md-0.

Horizontal centering

Use .mx-auto to horizontally center fixed-width block level content.

Centered element

<div class="mx-auto border border-primary text-center" style="width: 200px;">
  Centered element

Negative margin

As margin can utilize negative values, negative margin utilities are available for every non-zero value of the size property shown above. Simply add n before the size property, such as .mt-n3.