Spacing

Using the CSS Grid layout module? Consider using [the gap utility](#gap).

Notation

Spacing utilities that apply to all breakpoints, from xs to xxl, 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}={sides}-{size} for xs and {property}={sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Horizontal centering

Additionally, Bootstrap also includes an margin="x-auto" attribute 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.

<template>
  <b-div
    margin="x-auto"
    padding="2"
    style="width: 200px"
  >
    Centered element
  </b-div>
</template>

Gap

When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

<template>
  <b-div
    display="grid"
    :gap="3"
  >
    <b-div padding="2">
      Grid item 1
    </b-div>
    <b-div padding="2">
      Grid item 2
    </b-div>
    <b-div padding="2">
      Grid item 3
    </b-div>
  </b-div>
</template>

Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the $spacers map (0–5). There is no gap=auto utility class as it's effectively the same as gap=0.