Spacing

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.

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

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.