Class | Properties |
---|---|
.p-0 | padding: 0px; |
.px-0 | padding-left: 0px; padding-right: 0px; |
.py-0 | padding-top: 0px; padding-bottom: 0px; |
.pt-0 | padding-top: 0px; |
.pr-0 | padding-right: 0px; |
.pb-0 | padding-bottom: 0px; |
.pl-0 | padding-left: 0px; |
.p-1 | padding: 4px; |
.px-1 | padding-left: 4px; padding-right: 4px; |
.py-1 | padding-top: 4px; padding-bottom: 4px; |
.pt-1 | padding-top: 4px; |
.pr-1 | padding-right: 4px; |
.pb-1 | padding-bottom: 4px; |
.pl-1 | padding-left: 4px; |
.p-2 | padding: 8px; |
.px-2 | padding-left: 8px; padding-right: 8px; |
.py-2 | padding-top: 8px; padding-bottom: 8px; |
.pt-2 | padding-top: 8px; |
.pr-2 | padding-right: 8px; |
.pb-2 | padding-bottom: 8px; |
.pl-2 | padding-left: 8px; |
.p-3 | padding: 12px; |
.px-3 | padding-left: 12px; padding-right: 12px; |
.py-3 | padding-top: 12px; padding-bottom: 12px; |
.pt-3 | padding-top: 12px; |
.pr-3 | padding-right: 12px; |
.pb-3 | padding-bottom: 12px; |
.pl-3 | padding-left: 12px; |
.p-4 | padding: 16px; |
.px-4 | padding-left: 16px; padding-right: 16px; |
.py-4 | padding-top: 16px; padding-bottom: 16px; |
.pt-4 | padding-top: 16px; |
.pr-4 | padding-right: 16px; |
.pb-4 | padding-bottom: 16px; |
.pl-4 | padding-left: 16px; |
.p-5 | padding: 20px; |
.px-5 | padding-left: 20px; padding-right: 20px; |
.py-5 | padding-top: 20px; padding-bottom: 20px; |
.pt-5 | padding-top: 20px; |
.pr-5 | padding-right: 20px; |
.pb-5 | padding-bottom: 20px; |
.pl-5 | padding-left: 20px; |
.p-6 | padding: 24px; |
.px-6 | padding-left: 24px; padding-right: 24px; |
.py-6 | padding-top: 24px; padding-bottom: 24px; |
.pt-6 | padding-top: 24px; |
.pr-6 | padding-right: 24px; |
.pb-6 | padding-bottom: 24px; |
.pl-6 | padding-left: 24px; |
.p-7 | padding: 28px; |
.px-7 | padding-left: 28px; padding-right: 28px; |
.py-7 | padding-top: 28px; padding-bottom: 28px; |
.pt-7 | padding-top: 28px; |
.pr-7 | padding-right: 28px; |
.pb-7 | padding-bottom: 28px; |
.pl-7 | padding-left: 28px; |
.p-8 | padding: 32px; |
.px-8 | padding-left: 32px; padding-right: 32px; |
.py-8 | padding-top: 32px; padding-bottom: 32px; |
.pt-8 | padding-top: 32px; |
.pr-8 | padding-right: 32px; |
.pb-8 | padding-bottom: 32px; |
.pl-8 | padding-left: 32px; |
.p-9 | padding: 36px; |
.px-9 | padding-left: 36px; padding-right: 36px; |
.py-9 | padding-top: 36px; padding-bottom: 36px; |
.pt-9 | padding-top: 36px; |
.pr-9 | padding-right: 36px; |
.pb-9 | padding-bottom: 36px; |
.pl-9 | padding-left: 36px; |
.p-10 | padding: 40px; |
.px-10 | padding-left: 40px; padding-right: 40px; |
.py-10 | padding-top: 40px; padding-bottom: 40px; |
.pt-10 | padding-top: 40px; |
.pr-10 | padding-right: 40px; |
.pb-10 | padding-bottom: 40px; |
.pl-10 | padding-left: 40px; |
.p-12 | padding: 48px; |
.px-12 | padding-left: 48px; padding-right: 48px; |
.py-12 | padding-top: 48px; padding-bottom: 48px; |
.pt-12 | padding-top: 48px; |
.pr-12 | padding-right: 48px; |
.pb-12 | padding-bottom: 48px; |
.pl-12 | padding-left: 48px; |
.p-16 | padding: 64px; |
.px-16 | padding-left: 64px; padding-right: 64px; |
.py-16 | padding-top: 64px; padding-bottom: 64px; |
.pt-16 | padding-top: 64px; |
.pr-16 | padding-right: 64px; |
.pb-16 | padding-bottom: 64px; |
.pl-16 | padding-left: 64px; |
.p-20 | padding: 80px; |
.px-20 | padding-left: 80px; padding-right: 80px; |
.py-20 | padding-top: 80px; padding-bottom: 80px; |
.pt-20 | padding-top: 80px; |
.pr-20 | padding-right: 80px; |
.pb-20 | padding-bottom: 80px; |
.pl-20 | padding-left: 80px; |
.p-24 | padding: 96px; |
.px-24 | padding-left: 96px; padding-right: 96px; |
.py-24 | padding-top: 96px; padding-bottom: 96px; |
.pt-24 | padding-top: 96px; |
.pr-24 | padding-right: 96px; |
.pb-24 | padding-bottom: 96px; |
.pl-24 | padding-left: 96px; |
.p-32 | padding: 128px; |
.px-32 | padding-left: 128px; padding-right: 128px; |
.py-32 | padding-top: 128px; padding-bottom: 128px; |
.pt-32 | padding-top: 128px; |
.pr-32 | padding-right: 128px; |
.pb-32 | padding-bottom: 128px; |
.pl-32 | padding-left: 128px; |
.p-40 | padding: 160px; |
.px-40 | padding-left: 160px; padding-right: 160px; |
.py-40 | padding-top: 160px; padding-bottom: 160px; |
.pt-40 | padding-top: 160px; |
.pr-40 | padding-right: 160px; |
.pb-40 | padding-bottom: 160px; |
.pl-40 | padding-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="http://bootstrapemail.com">A Button with lots of padding</a>
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>