Spacing

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

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.

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>

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.