WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Padding

Previous Next

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