Spacing utility classes

Bootstrap 4 adds a new set of utility classes called spacing utility classes. These classes allow you to quickly add spacing in any direction of an element via margin or padding.

The format of these classes is [margin or padding]-[direction]-[size].

For margin or padding, use the following:

  • m for margin
  • p for padding

For direction, you can use these:

  • a for all
  • t for top
  • r for right
  • l for left
  • b for bottom
  • x for left and right
  • y for top and bottom

You can use these for sizes:

  • 0 for zero
  • 1 for 1rem
  • 2 for 1.5rem
  • 3 for 3rem

Here is an example to demonstrate the spacing utility classes. Place this code at the end of the container element of index.html:

<hr> <div class="row"> <div class="col-xs-12 m-t-2"> <p> Lorem ipsum dolor sit amet, at suscipit ...

Get JavaScript: Moving to ES2015 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.