Utilities

## Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance. Read the Official Bootstrap Documentation for a full list of instructions and other options.

##### Margin & Padding

Assign responsive-friendly margin and padding values to an element or a subset of its sides with shorthand classes.

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`
`s` | for classes that set `margin-left` or `padding-left`
`e` | for classes that set `margin-right` or `padding-right`
Where size is one of:
`0` | for classes that eliminate the `margin` or `padding` by setting it to `0`
`1` | for classes that set the `margin` or `padding` to `$spacer * .25`
`2` | for classes that set the `margin` or `padding` to `$spacer * .5`
`3` | for classes that set the `margin` or `padding` to `$spacer`
`4` | for classes that set the `margin` or `padding` to `$spacer * 1.5`
`5` | for classes that set the `margin` or `padding` to `$spacer * 3`
`auto` | for classes that set the `margin` to auto

##### Horizontal Centering

Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content

Centered element

##### 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.

Grid item 1
Grid item 2
Grid item 3