Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
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
Spacing utilities that apply to all breakpoints, from
xl, have no breakpoint abbreviation in them. This is because those classes are applied from
min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format
property is one of:
sides is one of:
size is one of:
$spacer * .25
$spacer * .5
$spacer * 1.5
$spacer * 3
Here are some representative examples of these classes:
margin-top: 0 !important;
margin-left: ($spacer * .25) !important;
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
padding: $spacer !important;
Additionally, 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.
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">