WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Padding

~1 min read · Bootstrap
On this page
❮ 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
This div has 1rem padding on all sides.
This div has no margin.
This div has a 0.5rem padding on top.
This div has a 1.5rem padding at the bottom.
This div has a 1rem padding on both sides (left and right).
This div has no padding on the top or bottom.
This div has a larger padding on medium screens and above.
This div has a small top padding on large screens and above.
Custom padding combinations!
Try it yourself

❮ Previous Next ❯