Bootstrap Email Templates are officially here! Get Templates Now<


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>