Spacing

go.raybo.org/49rU

Bootstrap gives you a number of classes you can use to add margin and padding to elements.

Padding

  • p{DIR}-{AMT}

  • DIR

t e b s
x y

  • AMT

0 1 2 3 4 5

Try it

Padding adds space inside an element. You can add it to the top, the right side, which is known as end, the bottom, or the left, also known as the start.

You can also add it to both horizontal sides or vertical sides with X and Y.

Margin

  • m{DIR}-{AMT}

  • DIR

t e b s
x y

  • AMT

0 1 2 3 4 5 auto

Try it

Margin is pretty much the same as padding, except that there's an additional setting for when margin needs to be set to auto.

Gap

  • gap-{AMT}

0 1 2 3 4 5

Try it

There's an additional utility called gap that is only relevant for some classes like the display-grid class.