Bootstrap 4 Padding


Basic Padding

The space between the content and the border is called padding. Many classes of padding in bootstrap are present. They work perfectly for all screen sizes. This tutorial will cover all types of padding classes in Bootstrap.

Normal Text
With Padding
<div class="d-inline bg-primary text-white">Normal Text</div>
<div class="d-inline p-2 bg-primary text-white">With Padding</div>

All Padding Classes

The padding classes are-

  1. .p-0 class sets padding to 0.
  2. .p-1 class sets padding to .25rem (4px) while font size 16px.
  3. .p-2 class sets padding to .5rem (8px) while font size 16px.
  4. .p-3 class sets padding to 1rem (16px) while font size 16px.
  5. .p-4 class sets padding to 1.5rem (24px) while font size 16px.
  6. .p-5 class sets padding to 3rem (48px) while font size 16px.
p-0
p-1
p-2
p-3
p-4
p-5
<div class="p-0 bg-primary">p-0</div>
<div class="p-1 bg-primary">p-1</div>
<div class="p-2 bg-primary">p-2</div>
<div class="p-3 bg-primary">p-3</div>
<div class="p-4 bg-primary">p-4</div>
<div class="p-5 bg-primary">p-5</div>

Bootstrap Padding Top

Only .pt- * classes are required to provide padding on top of the content.

pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
<div class="pt-0 bg-primary">pt-0</div>
<div class="pt-1 bg-primary">pt-1</div>
<div class="pt-2 bg-primary">pt-2</div>
<div class="pt-3 bg-primary">pt-3</div>
<div class="pt-4 bg-primary">pt-4</div>
<div class="pt-5 bg-primary">pt-5</div>

Bootstrap Padding Bottom

Only .pb- * classes are required to provide padding on bottom of the content.

pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
<div class="pb-0 bg-primary">pb-0</div>
<div class="pb-1 bg-primary">pb-1</div>
<div class="pb-2 bg-primary">pb-2</div>
<div class="pb-3 bg-primary">pb-3</div>
<div class="pb-4 bg-primary">pb-4</div>
<div class="pb-5 bg-primary">pb-5</div>

Bootstrap Padding Top and Bottom

Only .py-* classes need to be inserted to provide padding on the top and bottom side of the content.

py-0
py-1
py-2
py-3
py-4
py-5
<div class="py-0 bg-primary">py-0</div>
<div class="py-1 bg-primary">py-1</div>
<div class="py-2 bg-primary">py-2</div>
<div class="py-3 bg-primary">py-3</div>
<div class="py-4 bg-primary">py-4</div>
<div class="py-5 bg-primary">py-5</div>

Bootstrap Padding Left

Only .pl- * classes are required to provide padding on left of the content.

pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
<div class="pl-0 bg-primary">pl-0</div>
<div class="pl-1 bg-primary">pl-1</div>
<div class="pl-2 bg-primary">pl-2</div>
<div class="pl-3 bg-primary">pl-3</div>
<div class="pl-4 bg-primary">pl-4</div>
<div class="pl-5 bg-primary">pl-5</div>

Bootstrap Padding Right

Only .pr- * classes are required to provide padding on right of the content.

pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
<div class="pr-0 text-right bg-primary">pr-0</div>
<div class="pr-1 text-right bg-primary">pr-1</div>
<div class="pr-2 text-right bg-primary">pr-2</div>
<div class="pr-3 text-right bg-primary">pr-3</div>
<div class="pr-4 text-right bg-primary">pr-4</div>
<div class="pr-5 text-right bg-primary">pr-5</div>

Bootstrap Padding Left and Right

Only .px-* classes need to be inserted to provide padding on the left and right side of the content.

px-0
px-1
px-2
px-3
px-4
px-5
<div class="px-0 bg-primary">px-0</div>
<div class="px-1 bg-primary">px-1</div>
<div class="px-2 bg-primary">px-2</div>
<div class="px-3 bg-primary">px-3</div>
<div class="px-4 bg-primary">px-4</div>
<div class="px-5 bg-primary">px-5</div>

Responsive Padding

Bootstrap padding classes are more used for their responsiveness. Padding We can change the classes according to the screen size.

Extra Large Screen(>=1200px)

The following example shows only changes to the xl screen.

p-xl-0
p-xl-1
p-xl-2
p-xl-3
p-xl-4
p-xl-5
<div class="p-xl-0 text-right bg-primary">p-xl-0</div>
<div class="p-xl-1 text-right bg-primary">p-xl-1</div>
<div class="p-xl-2 text-right bg-primary">p-xl-2</div>
<div class="p-xl-3 text-right bg-primary">p-xl-3</div>
<div class="p-xl-4 text-right bg-primary">p-xl-4</div>
<div class="p-xl-5 text-right bg-primary">p-xl-5</div>

Large Screen(>=992px)

In the following example, only lg screen or more screen size changes can be seen.

p-lg-0
p-lg-1
p-lg-2
p-lg-3
p-lg-4
p-lg-5
<div class="p-lg-0 text-right bg-primary">p-lg-0</div>
<div class="p-lg-1 text-right bg-primary">p-lg-1</div>
<div class="p-lg-2 text-right bg-primary">p-lg-2</div>
<div class="p-lg-3 text-right bg-primary">p-lg-3</div>
<div class="p-lg-4 text-right bg-primary">p-lg-4</div>
<div class="p-lg-5 text-right bg-primary">p-lg-5</div>

Medium Screen(>=768px)

In the following example, only md screen or more screen size changes can be seen.

p-md-0
p-md-1
p-md-2
p-md-3
p-md-4
p-md-5
<div class="p-md-0 text-right bg-primary">p-md-0</div>
<div class="p-md-1 text-right bg-primary">p-md-1</div>
<div class="p-md-2 text-right bg-primary">p-md-2</div>
<div class="p-md-3 text-right bg-primary">p-md-3</div>
<div class="p-md-4 text-right bg-primary">p-md-4</div>
<div class="p-md-5 text-right bg-primary">p-md-5</div>

Small Screen(>=576px)

In the following example, only sm screen or more screen size changes can be seen.

p-sm-0
p-sm-1
p-sm-2
p-sm-3
p-sm-4
p-sm-5
<div class="p-sm-0 text-right bg-primary">p-sm-0</div>
<div class="p-sm-1 text-right bg-primary">p-sm-1</div>
<div class="p-sm-2 text-right bg-primary">p-sm-2</div>
<div class="p-sm-3 text-right bg-primary">p-sm-3</div>
<div class="p-sm-4 text-right bg-primary">p-sm-4</div>
<div class="p-sm-5 text-right bg-primary">p-sm-5</div>