Padding Bootstrap

In Bootstrap 4, padding is used to create space inside an element, between the element's border and its content. You can use Bootstrap's padding utility classes to adjust this spacing easily. The padding classes in Bootstrap 4 follow a pattern of .p{side}-{size}.

Bootstrap 4 Padding Classes

Here's a breakdown of the padding classes:

• .p-{size}: Applies padding to all sides.
• .pt-{size}: Applies padding to the top.
• .pb-{size}: Applies padding to the bottom.
• .pl-{size}: Applies padding to the left.
• .pr-{size}: Applies padding to the right.
• .px-{size}: Applies padding to the left and right (horizontal).
• .py-{size}: Applies padding to the top and bottom (vertical).

The {size} can be one of the following values: 0, 1, 2, 3, 4, 5, where 0 is no padding, and 5 is the largest padding.

Examples

1. Padding on All Sides

<div class="p-3">
  This div has padding of 1rem (16px) on all sides.
</div>

2. Padding on Specific Sides

<div class="pt-4 pb-2 pl-3 pr-1">
  This div has padding of 1.5rem (24px) on the top, 0.5rem (8px) on the bottom, 1rem (16px) on the left, and 0.25rem (4px) on the right.
</div>

3. Horizontal and Vertical Padding

<div class="px-2 py-4">
  This div has padding of 0.5rem (8px) on the left and right, and 1.5rem (24px) on the top and bottom.
</div>

Conclusion

These classes allow you to create responsive and adjustable layouts quickly without needing to write custom CSS.