Bootstrap Spacing Cheat Sheet

Padding All Sides (p-*)

Class	rem	Approx px	Direction	Usage
p-0	0	0px	All sides	No padding
p-1	0.25rem	4px	All sides	Small padding
p-2	0.5rem	8px	All sides	Medium padding
p-3	1rem	16px	All sides	Default padding
p-4	1.5rem	24px	All sides	Large padding
p-5	3rem	48px	All sides	Extra large padding

Class

rem

Approx px

Direction

Usage

p-0

0px

All sides

No padding

p-1

0.25rem

4px

All sides

Small padding

p-2

0.5rem

8px

All sides

Medium padding

p-3

1rem

16px

All sides

Default padding

p-4

1.5rem

24px

All sides

Large padding

p-5

3rem

48px

All sides

Extra large padding

Horizontal Padding (px-*)

Class	rem	Approx px	Direction	Usage
px-0	0	0px	Left → Right	No horizontal padding
px-1	0.25rem	4px	Left → Right	Small horizontal padding
px-2	0.5rem	8px	Left → Right	Medium horizontal padding
px-3	1rem	16px	Left → Right	Default horizontal padding
px-4	1.5rem	24px	Left → Right	Large horizontal padding
px-5	3rem	48px	Left → Right	Extra large horizontal padding

Class

rem

Approx px

Direction

Usage

px-0

0px

Left → Right

No horizontal padding

px-1

0.25rem

4px

Left → Right

Small horizontal padding

px-2

0.5rem

8px

Left → Right

Medium horizontal padding

px-3

1rem

16px

Left → Right

Default horizontal padding

px-4

1.5rem

24px

Left → Right

Large horizontal padding

px-5

3rem

48px

Left → Right

Extra large horizontal padding

Vertical Padding (py-*)

Class	rem	Approx px	Direction	Usage
py-0	0	0px	Top → Bottom	No vertical padding
py-1	0.25rem	4px	Top → Bottom	Small vertical padding
py-2	0.5rem	8px	Top → Bottom	Medium vertical padding
py-3	1rem	16px	Top → Bottom	Default vertical padding
py-4	1.5rem	24px	Top → Bottom	Large vertical padding
py-5	3rem	48px	Top → Bottom	Extra large vertical padding

Class

rem

Approx px

Direction

Usage

py-0

0px

Top → Bottom

No vertical padding

py-1

0.25rem

4px

Top → Bottom

Small vertical padding

py-2

0.5rem

8px

Top → Bottom

Medium vertical padding

py-3

1rem

16px

Top → Bottom

Default vertical padding

py-4

1.5rem

24px

Top → Bottom

Large vertical padding

py-5

3rem

48px

Top → Bottom

Extra large vertical padding

Individual Sides Padding (pt, pb, ps, pe)

Class	Side	rem	Approx px	Direction	Usage
pt-*	Top	0-3rem	0-48px	Top → Down	Top padding only
pb-*	Bottom	0-3rem	0-48px	Bottom → Up	Bottom padding only
ps-*	Left / Start	0-3rem	0-48px	Left → Right	Left/start padding only
pe-*	Right / End	0-3rem	0-48px	Right → Left	Right/end padding only

Class

Side

rem

Approx px

Direction

Usage

pt-*

Top

0-3rem

0-48px

Top → Down

Top padding only

pb-*

Bottom

0-3rem

0-48px

Bottom → Up

Bottom padding only

ps-*

Left / Start

0-3rem

0-48px

Left → Right

Left/start padding only

pe-*

Right / End

0-3rem

0-48px

Right → Left

Right/end padding only

FAQ / Interview Questions

1. What is the difference between px-* and py-*?: Answer: px-* adds horizontal padding (left & right), py-* adds vertical padding (top & bottom).
2. What does p-* do?: Answer: p-* adds padding to all four sides (top, right, bottom, left).
3. Explain pt-*, pb-*, ps-*, pe-* classes.: Answer: These target individual sides: pt = top, pb = bottom, ps = left/start, pe = right/end.
4. How does Bootstrap use rem for spacing?: Answer: rem ensures spacing scales with root font size, making padding/margin responsive across devices.
5. What is the largest default padding class?: Answer: p-5 (3rem ≈ 48px).
6. How to center a div horizontally?: Answer: Use m-auto to set left & right margins automatically.
7. How to apply different horizontal and vertical padding?: Answer: Use both px-* and py-* together, e.g., class="px-3 py-2".