Bootstrap Margin Cheat Sheet

Margin All Sides (m-*)

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

Class

rem

Approx px

Direction

Usage

m-0

0px

All sides

No margin

m-1

0.25rem

4px

All sides

Small margin

m-2

0.5rem

8px

All sides

Medium margin

m-3

1rem

16px

All sides

Default margin

m-4

1.5rem

24px

All sides

Large margin

m-5

3rem

48px

All sides

Extra large margin

Horizontal Margin (mx-*)

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

Class

rem

Approx px

Direction

Usage

mx-0

0px

Left → Right

No horizontal margin

mx-1

0.25rem

4px

Left → Right

Small horizontal margin

mx-2

0.5rem

8px

Left → Right

Medium horizontal margin

mx-3

1rem

16px

Left → Right

Default horizontal margin

mx-4

1.5rem

24px

Left → Right

Large horizontal margin

mx-5

3rem

48px

Left → Right

Extra large horizontal margin

Vertical Margin (my-*)

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

Class

rem

Approx px

Direction

Usage

my-0

0px

Top → Bottom

No vertical margin

my-1

0.25rem

4px

Top → Bottom

Small vertical margin

my-2

0.5rem

8px

Top → Bottom

Medium vertical margin

my-3

1rem

16px

Top → Bottom

Default vertical margin

my-4

1.5rem

24px

Top → Bottom

Large vertical margin

my-5

3rem

48px

Top → Bottom

Extra large vertical margin

Individual Sides Margin (mt, mb, ms, me)

Class	Side	rem	Approx px	Direction	Usage
mt-*	Top	0-3rem	0-48px	Top → Down	Top margin only
mb-*	Bottom	0-3rem	0-48px	Bottom → Up	Bottom margin only
ms-*	Left / Start	0-3rem	0-48px	Left → Right	Left/start margin only
me-*	Right / End	0-3rem	0-48px	Right → Left	Right/end margin only

Class

Side

rem

Approx px

Direction

Usage

mt-*

Top

0-3rem

0-48px

Top → Down

Top margin only

mb-*

Bottom

0-3rem

0-48px

Bottom → Up

Bottom margin only

ms-*

Left / Start

0-3rem

0-48px

Left → Right

Left/start margin only

me-*

Right / End

0-3rem

0-48px

Right → Left

Right/end margin only

FAQ / Interview Questions - Margin

1. What is the difference between mx-* and my-*?: Answer: mx-* sets horizontal margin (left & right), my-* sets vertical margin (top & bottom).
2. What does m-* do?: Answer: m-* applies margin to all four sides.
3. Explain mt-*, mb-*, ms-*, me-* classes.: Answer: These target individual sides: mt = top, mb = bottom, ms = left/start, me = right/end.
4. How do you center a div using margin?: Answer: Use mx-auto to center a div horizontally.
5. What is the largest default margin class?: Answer: m-5 (3rem ≈ 48px).
6. How to apply different horizontal and vertical margins?: Answer: Use mx-* for horizontal and my-* for vertical at the same time, e.g., class="mx-3 my-2".