Utilities

Spacing

There are a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

Margin and padding

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. Classes are built from a default Sass map ranging from .25rem to 3rem.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set *-left
• r - for classes that set *-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding .25rem
• 2 - (by default) for classes that set the margin or padding .5rem
• 3 - (by default) for classes that set the margin or padding
• 4 - (by default) for classes that set the margin or padding 1.5rem
• 5 - (by default) for classes that set the margin or padding 3rem
• auto - for classes that set the margin to auto

Examples

<div class="px-5">Left and right padding of 3rem</div>

<div class="py-4">Top and bottom padding of 1.5rem</div>

<div class="ml-4">Left margin of 1.4rem</div>

Horizontal centering

Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Example:

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