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 sodales eget ante ultricies mauris. Etiam dolor felis morbi nibh, mollit porttitor tempor, dignissim magna pellentesque dictumst bibendum dictum integer. Justo mattis dapibus in diam. Quis arcu...