Bootstrap 5 Padding Utilities: A Complete Guide

In Bootstrap 5, padding utility classes allow you to control the inner spacing of elements. These classes are similar to the margin utilities but affect the padding inside elements.

Syntax:

p{side?}-{breakpoint?}-{size}

p: Indicates padding.
side: Specifies which side(s) the padding applies to:
t: Top
b: Bottom
s: Start (left in LTR, right in RTL)
e: End (right in LTR, left in RTL)
x: Horizontal (start and end)
y: Vertical (top and bottom)
No side specified: Applies to all sides.
breakpoint (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl).
size: Defines the size of the padding:
0: No margin.
1: 0.25rem (4px).
2: 0.5rem (8px).
3: 1rem (16px).
4: 1.5rem (24px).
5: 3rem (48px).
auto: Sets the padding to auto for centering.

Example

<div class="p-3">This div has 1rem padding on all sides.</div>

<div class="p-0">This div has no margin.</div>

<div class="pt-2">This div has a 0.5rem padding on top.</div>

<div class="pb-4">This div has a 1.5rem padding at the bottom.</div>

<div class="px-3">This div has a 1rem padding on both sides (left and right).</div>

<div class="py-0">This div has no padding on the top or bottom.</div>

<div class="p-md-5">This div has a larger padding on medium screens and above.</div>

<div class="pt-lg-2">This div has a small top padding on large screens and above.</div>

<div class="pt-3 pe-2 px-sm-auto">Custom padding combinations!</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.