Bootstrap Margin Cheat Sheet

Margin All Sides (m-*)

Class rem Approx px Direction Usage
m-000pxAll sidesNo margin
m-10.25rem4pxAll sidesSmall margin
m-20.5rem8pxAll sidesMedium margin
m-31rem16pxAll sidesDefault margin
m-41.5rem24pxAll sidesLarge margin
m-53rem48pxAll sidesExtra large margin

Horizontal Margin (mx-*)

Class rem Approx px Direction Usage
mx-000pxLeft → RightNo horizontal margin
mx-10.25rem4pxLeft → RightSmall horizontal margin
mx-20.5rem8pxLeft → RightMedium horizontal margin
mx-31rem16pxLeft → RightDefault horizontal margin
mx-41.5rem24pxLeft → RightLarge horizontal margin
mx-53rem48pxLeft → RightExtra large horizontal margin

Vertical Margin (my-*)

Class rem Approx px Direction Usage
my-000pxTop → BottomNo vertical margin
my-10.25rem4pxTop → BottomSmall vertical margin
my-20.5rem8pxTop → BottomMedium vertical margin
my-31rem16pxTop → BottomDefault vertical margin
my-41.5rem24pxTop → BottomLarge vertical margin
my-53rem48pxTop → BottomExtra large vertical margin

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

Class Side rem Approx px Direction Usage
mt-*Top0-3rem0-48pxTop → DownTop margin only
mb-*Bottom0-3rem0-48pxBottom → UpBottom margin only
ms-*Left / Start0-3rem0-48pxLeft → RightLeft/start margin only
me-*Right / End0-3rem0-48pxRight → LeftRight/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".