These docs are for the prereleased 1.0.0.alpha3 version of Bootstrap Email - Give Feedback

Padding

Responsive
Add padding to table cells

Class Properties
.p-0padding: 0px;
.px-0padding-left: 0px; padding-right: 0px;
.py-0padding-top: 0px; padding-bottom: 0px;
.pt-0padding-top: 0px;
.pr-0padding-right: 0px;
.pb-0padding-bottom: 0px;
.pl-0padding-left: 0px;
.p-1padding: 4px;
.px-1padding-left: 4px; padding-right: 4px;
.py-1padding-top: 4px; padding-bottom: 4px;
.pt-1padding-top: 4px;
.pr-1padding-right: 4px;
.pb-1padding-bottom: 4px;
.pl-1padding-left: 4px;
.p-2padding: 8px;
.px-2padding-left: 8px; padding-right: 8px;
.py-2padding-top: 8px; padding-bottom: 8px;
.pt-2padding-top: 8px;
.pr-2padding-right: 8px;
.pb-2padding-bottom: 8px;
.pl-2padding-left: 8px;
.p-3padding: 12px;
.px-3padding-left: 12px; padding-right: 12px;
.py-3padding-top: 12px; padding-bottom: 12px;
.pt-3padding-top: 12px;
.pr-3padding-right: 12px;
.pb-3padding-bottom: 12px;
.pl-3padding-left: 12px;
.p-4padding: 16px;
.px-4padding-left: 16px; padding-right: 16px;
.py-4padding-top: 16px; padding-bottom: 16px;
.pt-4padding-top: 16px;
.pr-4padding-right: 16px;
.pb-4padding-bottom: 16px;
.pl-4padding-left: 16px;
.p-5padding: 20px;
.px-5padding-left: 20px; padding-right: 20px;
.py-5padding-top: 20px; padding-bottom: 20px;
.pt-5padding-top: 20px;
.pr-5padding-right: 20px;
.pb-5padding-bottom: 20px;
.pl-5padding-left: 20px;
.p-6padding: 24px;
.px-6padding-left: 24px; padding-right: 24px;
.py-6padding-top: 24px; padding-bottom: 24px;
.pt-6padding-top: 24px;
.pr-6padding-right: 24px;
.pb-6padding-bottom: 24px;
.pl-6padding-left: 24px;
.p-7padding: 28px;
.px-7padding-left: 28px; padding-right: 28px;
.py-7padding-top: 28px; padding-bottom: 28px;
.pt-7padding-top: 28px;
.pr-7padding-right: 28px;
.pb-7padding-bottom: 28px;
.pl-7padding-left: 28px;
.p-8padding: 32px;
.px-8padding-left: 32px; padding-right: 32px;
.py-8padding-top: 32px; padding-bottom: 32px;
.pt-8padding-top: 32px;
.pr-8padding-right: 32px;
.pb-8padding-bottom: 32px;
.pl-8padding-left: 32px;
.p-9padding: 36px;
.px-9padding-left: 36px; padding-right: 36px;
.py-9padding-top: 36px; padding-bottom: 36px;
.pt-9padding-top: 36px;
.pr-9padding-right: 36px;
.pb-9padding-bottom: 36px;
.pl-9padding-left: 36px;
.p-10padding: 40px;
.px-10padding-left: 40px; padding-right: 40px;
.py-10padding-top: 40px; padding-bottom: 40px;
.pt-10padding-top: 40px;
.pr-10padding-right: 40px;
.pb-10padding-bottom: 40px;
.pl-10padding-left: 40px;
.p-12padding: 48px;
.px-12padding-left: 48px; padding-right: 48px;
.py-12padding-top: 48px; padding-bottom: 48px;
.pt-12padding-top: 48px;
.pr-12padding-right: 48px;
.pb-12padding-bottom: 48px;
.pl-12padding-left: 48px;
.p-16padding: 64px;
.px-16padding-left: 64px; padding-right: 64px;
.py-16padding-top: 64px; padding-bottom: 64px;
.pt-16padding-top: 64px;
.pr-16padding-right: 64px;
.pb-16padding-bottom: 64px;
.pl-16padding-left: 64px;
.p-20padding: 80px;
.px-20padding-left: 80px; padding-right: 80px;
.py-20padding-top: 80px; padding-bottom: 80px;
.pt-20padding-top: 80px;
.pr-20padding-right: 80px;
.pb-20padding-bottom: 80px;
.pl-20padding-left: 80px;
.p-24padding: 96px;
.px-24padding-left: 96px; padding-right: 96px;
.py-24padding-top: 96px; padding-bottom: 96px;
.pt-24padding-top: 96px;
.pr-24padding-right: 96px;
.pb-24padding-bottom: 96px;
.pl-24padding-left: 96px;
.p-32padding: 128px;
.px-32padding-left: 128px; padding-right: 128px;
.py-32padding-top: 128px; padding-bottom: 128px;
.pt-32padding-top: 128px;
.pr-32padding-right: 128px;
.pb-32padding-bottom: 128px;
.pl-32padding-left: 128px;
.p-40padding: 160px;
.px-40padding-left: 160px; padding-right: 160px;
.py-40padding-top: 160px; padding-bottom: 160px;
.pt-40padding-top: 160px;
.pr-40padding-right: 160px;
.pb-40padding-bottom: 160px;
.pl-40padding-left: 160px;

Usage

There are two types of spacing Bootstrap Email supports. Padding (applied to the inside of table cells) and Margin (in the form of vertical spacers which are used to take up space between elements vertically).

<a class="btn btn-primary p-3" href="http://bootstrapemail.com">A Button with lots of padding</a>

A Button with lots of padding


Compiled Example

Input

<a class="btn btn-primary p-5" href="http://example.com">Button with mega padding</a>

Output

<table class="btn btn-primary p-5" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
        <a href="http://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 20px; border: 1px solid #0d6efd;">Button with mega padding</a>
      </td>
    </tr>
  </tbody>
</table>