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


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;


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="">A Button with lots of padding</a>

A Button with lots of padding

Compiled Example


<a class="btn btn-primary p-5" href="">Button with mega padding</a>


<table class="btn btn-primary p-5" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
      <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
        <a href="" 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>