<div class="container my-4">

​

    <p class="font-weight-bold">Bootstrap includes a wide range of shorthand responsive margin utility classes to

      modify an element’s appearance.</p>

​

    <p><strong>Detailed documentation and more examples of Bootstrap padding you can find in our <a

          href="https://mdbootstrap.com/docs/b4/jquery/utilities/spacing/" target="_blank">Bootstrap Spacing Docs</a>.</p>

​

​

    <p><strong class="font-weight-bold">Example:</strong> Usage <code>pr-*</code> class.</p>

​

    <p><code>p</code> - for classes that set padding</p>

    <p><code>r</code> - for classes that set <code>padding-right</code></p>

​

    <span class="badge badge-primary pr-5">.pr-5</span>

​

    <span class="badge badge-primary p-3">.p-3</span>

​

    <span class="badge badge-primary py-4">.py-4</span>

​

    <span class="badge badge-primary p-0">.p-0</span>

​

    <hr class="my-5">

​

    <!--Title-->

    <h2 id="notation" class="secondary-heading mb-3">

      Notation

    </h2>

​

    <!--Description-->

    <p> Spacing utilities that apply to all breakpoints, from

      <code>xs</code> to

      <code>xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from

      <code>min-</code>

      <code>width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do

      include a breakpoint

      abbreviation.

    </p>

​

    <p>The classes are named using the format

      <code>{property}{sides}-{size}</code> for

      <code>xs</code> and

      <code>{property}{sides}-{breakpoint}-{size}</code> for

      <code>sm</code>,

      <code>md</code>,

      <code>lg</code>, and

      <code>xl</code>.</p>

​

    <p>Where

      <i>property</i> is one of:</p>

​

    <!--Section: Live preview-->

    <section>

​

      <ul>

        <li>

          <code>m</code> - for classes that set

          <code>margin</code>

        </li>

        <li>

          <code>p</code> - for classes that set

          <code>padding</code>

        </li>

      </ul>

​

      <p>Where

        <i>sides</i> is one of:</p>

​

      <ul>

        <li>

          <code>t</code> - for classes that set

          <code>margin-top</code> or

          <code>padding-top</code>

        </li>

        <li>

          <code>b</code> - for classes that set

          <code>margin-bottom</code> or

          <code>padding-bottom</code>

        </li>

        <li>

          <code>l</code> - for classes that set

          <code>margin-left</code> or

          <code>padding-left</code>

        </li>

        <li>

          <code>r</code> - for classes that set

          <code>margin-right</code> or

          <code>padding-right</code>

        </li>

        <li>

          <code>x</code> - for classes that set both

          <code>*-left</code> and

          <code>*-right</code>

        </li>

        <li>

          <code>y</code> - for classes that set both

          <code>*-top</code> and

          <code>*-bottom</code>

        </li>

        <li>blank - for classes that set a

          <code>margin</code> or

          <code>padding</code> on all 4 sides of the element</li>

      </ul>

​

      <p>Where

        <i>breakpoint</i> is one of:</p>

​

      <ul>

        <li>

          <code>sm</code>

        </li>

        <li>

          <code>md</code>

        </li>

        <li>

          <code>lg</code>

        </li>

        <li>

          <code>xl</code>

        </li>

      </ul>

​

      <p>Where

        <i>size</i> is one of:</p>

​

​

      <ul>

        <li>

          <code>0</code> - for classes that eliminate the margin or

          <code>padding</code> by setting it to

          <code>0</code>

        </li>

        <li>

          <code>1</code> - (by default) for classes that set the

          <code>margin</code> or

          <code>padding</code> to

          <code>$spacer-x</code>

          <code> * .25</code> or

          <code>$spacer-y * .25</code>

        </li>

        <li>

          <code>2</code> - (by default) for classes that set the

          <code>margin</code> or

          <code>padding</code> to

          <code>$spacer-x</code>

          <code> * .5</code> or

          <code>$spacer-y * .5</code>

        </li>

        <li>

          <code>3</code> - (by default) for classes that set the

          <code>margin</code> or

          <code>padding</code> to

          <code>$spacer-x</code> or

          <code>$spacer-y</code>

        </li>

        <li>

          <code>4</code> - (by default) for classes that set the

          <code>margin</code> or

          <code>padding</code> to

          <code> $spacer-x</code>

          <code> * 1.5</code> or

          <code>$spacer-y * 1.5</code>

        </li>

        <li>

          <code>5</code> - (by default) for classes that set the

          <code>margin</code> or

          <code>padding</code> to

          <code>$spacer-x</code>

          <code> * 3</code> or

          <code>$spacer-y * 3</code>

        </li>

      </ul>

      (You can add more sizes by adding entries to the

      <code>$spacers</code> Sass map variable.)

​

  </div>

​