v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Spacing

Shorthand responsive margin and padding utility classes to modify an element’s appearance.

Page Contents

How It Works #

Assign margin or padding 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 generated from a Sass map with values ranging from 0.25rem to 2rem.

Notation #

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

Where property is one of:

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

Where breakpoint is one of the responsive breakpoints, if above the minimum xs size. Please refer to how our breakpoint nomenclature is used.

Where sides is one of:

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

The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.

  • For left-to-right mode (ltr - default);
    • start refers to the left side
    • end refers to the right side
  • For right-to-left mode (rtl);
    • start refers to the right side
    • end refers to the left side

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 0_25 - for classes that set the property to $spacer * 0.25
  • 0_5 - for classes that set the property to $spacer * 0.5
  • 1 - for classes that set the property to $spacer
  • 1_5 - for classes that set the property to $spacer * 1.5
  • 2 - for classes that set the property to $spacer * 2
  • auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Examples #

Here are some representative examples of these classes:

.mt-0 {
margin-top: 0 !important;
}

.ms-1 {
margin-left: $spacer !important;
}

.mt-md-1 {
margin-top: $spacer !important;
}

.px-1_5 {
padding-left: ($spacer * 1.5) !important;
padding-right: ($spacer * 1.5) !important;
}

.p-2 {
padding: ($spacer * 2) ($spacer * 2) !important;
}

Horizontal Centering #

Additionally, we also include an .mx-auto class for horizontally centering fixed-width block level content— an element with display: block; and a defined width—by setting the horizontal margins to auto.

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

Negative Margins #

In CSS, the margin properties can utilize negative values (padding cannot). Negative margin utilities are for every non-zero size listed above (e.g., 0_25, 0_5, 1, 1_5, 2). These utilities can also be used for customizing the grid column gutters across breakpoints.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here's an example class that's the opposite of .mt-0_25:

.mt-n0_25 {
margin-top: -0.25rem !important;
}

Here is a comparison and example of customizing the grid at the medium (md) breakpoint and above. The the .col horizontal padding is increased with .px-md-2 and then counteracted that with negative horizontal margin .mx-md-n2 on the parent .row.

Standard horizontal column padding
Standard horizontal column padding
Custom horizontal column padding
Custom horizontal column padding
<div class="row mb-1">
<div class="col">Standard horizontal column padding</div>
<div class="col">Standard horizontal column padding</div>
</div>

<div class="row mx-md-n2">
<div class="col px-md-2">Custom horizontal column padding</div>
<div class="col px-md-2">Custom horizontal column padding</div>
</div>

In some cases, you may also have to adjust the padding on the parent container of the .row element to prevent horizontal scrollbars from occuring. For example, using the custom negative margin example above, you may find the need to use .px-md-2 on the parent .container-fluid.

Custom horizontal column padding
Custom horizontal column padding
<div class="container-fluid px-md-2">
<div class="row mx-md-n2">
<div class="col px-md-2">Custom horizontal column padding</div>
<div class="col px-md-2">Custom horizontal column padding</div>
</div>
</div>

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-spacing boolean true Enable the generation of the spacing utility classes.
$enable-utility-spacing-padding boolean true Enable the generation of the padding utility classes.
$enable-utility-spacing-margin boolean true Enable the generation of the margin utility classes.
$enable-utility-spacing-margin-auto boolean true Enable the generation of the auto maring utility classes.
$enable-utility-spacing-margin-negative boolean true Enable the generation of the negative margin utility classes.
$spacer string 1rem Base spacer dimension.
$spacers map
"0":    0,
"0_25": ($spacer * .25),
"0_5":  ($spacer * .5),
"1":    $spacer,
"1_5":  ($spacer * 1.5),
"2":    ($spacer * 2)
Map of sizing append names and rules to be generated.
$spacers-padding map $spacers Map of padding sizing rules to be generated.
$spacers-margin map $spacers Map of margin sizing rules to be generated.
$spacers-margin-negative map $spacers Map of negative margin sizing rules to be generated.
$spacers-margin-negative-prepend string n The string prepended to the name to designate negative margin classes.

Mixins #

No mixins available.