Spacing utilities (margin, padding) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class m-3 do?

It adds margin on all sides of an element with a size of 3 (which equals 1rem by default).

beginner

How do you add padding only to the left side of an element in Bootstrap?

Use the class ps-* where * is the size number (0 to 5). For example, ps-2 adds padding-left with size 2.

beginner

What is the difference between m-0 and p-0 in Bootstrap?

m-0 removes all margin from the element, while p-0 removes all padding.

intermediate

Explain what mx-auto does in Bootstrap.

It sets the left and right margins to auto, centering the element horizontally within its container.

intermediate

How do you apply different spacing on different screen sizes using Bootstrap spacing utilities?

Use responsive classes like m-sm-2 or p-lg-4 to apply margin or padding starting from the specified breakpoint (small, large, etc.).

Which Bootstrap class adds padding on all sides with size 4?

A p-4

B m-4

C px-4

D py-4

p-4 adds padding on all sides. m-4 adds margin, px-4 adds padding left and right, py-4 adds padding top and bottom.

What does the class mt-0 do?

A Adds top padding size 0

B Removes top margin

C Adds top margin size 0.5

D Removes all margin

mt-0 removes the top margin by setting it to zero.

How do you center a block element horizontally using Bootstrap spacing utilities?

A Add <code>my-auto</code>

B Add <code>m-auto</code>

C Add <code>p-auto</code>

D Add <code>mx-auto</code>

mx-auto sets left and right margins to auto, centering the element horizontally.

Which class adds margin only on the bottom with size 3?

A ml-3

B mt-3

C mb-3

D mr-3

mb-3 adds margin-bottom with size 3.

How do you add padding-left size 2 only on medium and larger screens?

A ps-md-2

B pl-md-2

C ps-2-md

D p-md-l-2

Bootstrap uses ps-md-2 for padding start (left) on medium and larger screens.

Describe how Bootstrap spacing utilities help control margin and padding on elements.

Think about how you add space around or inside boxes in a webpage.

Explain how to center an element horizontally using Bootstrap spacing utilities.

Remember how auto margins can center blocks in CSS.

Practice

1. Which Bootstrap class adds padding on all sides of an element?

easy

A. pt-3

B. p-3

C. m-3

D. ml-3

Solution

1. Step 1: Understand padding and margin prefixes

   In Bootstrap, p stands for padding and m stands for margin.

2. Step 2: Identify the class that adds padding on all sides

   p-3 adds padding of size 3 on all sides, while pt-3 adds padding only on top, and ml-3 adds margin on the left.

3. Final Answer:

   p-3 -> Option B

4. Quick Check:

   Padding all sides = p-3 [OK]

Hint: p = padding, m = margin; number sets size [OK]

Common Mistakes:

• Confusing margin (m) with padding (p)
• Using side-specific classes instead of all sides
• Mixing up padding and margin prefixes

2. Which is the correct Bootstrap class to add a margin only on the bottom with size 4?

easy

A. mb4

B. m-4b

C. bm-4

D. mb-4

Solution

1. Step 1: Recall margin side abbreviations

   Bootstrap uses m for margin and b for bottom side.

2. Step 2: Check correct syntax for margin bottom size 4

   The correct format is mb-4. Other options have incorrect order or missing dash.

3. Final Answer:

   mb-4 -> Option D

4. Quick Check:

   Margin bottom size 4 = mb-4 [OK]

Hint: Margin bottom = mb, dash before size number [OK]

Common Mistakes:

• Omitting dash between side and size
• Reversing side and margin letters
• Using invalid class names

3. What visual effect will the class px-5 have on a Bootstrap element?

medium

A. Adds horizontal padding (left and right) with size 5

B. Adds vertical margin (top and bottom) with size 5

C. Adds padding only on the left side with size 5

D. Adds margin only on the right side with size 5

Solution

1. Step 1: Decode the class prefix and side abbreviation

   p means padding, and x means horizontal sides (left and right).

2. Step 2: Understand the size number

   Size 5 is the largest spacing size in Bootstrap's scale, so it adds large horizontal padding.

3. Final Answer:

   Adds horizontal padding (left and right) with size 5 -> Option A

4. Quick Check:

   px-5 = horizontal padding size 5 [OK]

Hint: x = horizontal sides, p = padding [OK]

Common Mistakes:

• Confusing padding (p) with margin (m)
• Mixing horizontal (x) with vertical (y)
• Assuming single side padding instead of both

4. You want to add margin on the left side only, but your element has class ml-2 and it doesn't work. What is the likely mistake?

medium

A. The class ml-2 is invalid in Bootstrap 5.

B. You forgot to include Bootstrap CSS file in your project.

C. You should use pl-2 instead of ml-2.

D. Margin classes only work on block elements.

Solution

1. Step 1: Check class validity in Bootstrap 5

   In Bootstrap 5, ml-2 is replaced by ms-2 (start instead of left), so ml-2 won't work.

2. Step 2: Verify if Bootstrap CSS is loaded

   If Bootstrap CSS is missing, none of its classes, including ml-2, will apply styles. But the specific class points to version issue.

3. Final Answer:

   The class ml-2 is invalid in Bootstrap 5. -> Option A

4. Quick Check:

   ml-2 invalid in BS5 = no margin applied [OK]

Hint: In Bootstrap 5, ml-* -> ms-* (margin-start) [OK]

Common Mistakes:

• Using old Bootstrap 4 classes in Bootstrap 5
• Not linking Bootstrap CSS file
• Confusing padding and margin classes

5. You want to add equal padding on the top and bottom and equal margin on the left and right of a div. Which combination of Bootstrap classes achieves this?

hard

A. p-3 m-4

B. pt-3 mb-4

C. py-3 mx-4

D. px-3 my-4

Solution

1. Step 1: Understand padding and margin side abbreviations

   py means padding on vertical sides (top and bottom), and mx means margin on horizontal sides (left and right).

2. Step 2: Match the sizes and sides needed

   py-3 adds padding top and bottom size 3, mx-4 adds margin left and right size 4, exactly what is asked.

3. Final Answer:

   py-3 mx-4 -> Option C

4. Quick Check:

   Vertical padding + horizontal margin = py-3 mx-4 [OK]

Hint: y = vertical, x = horizontal; p = padding, m = margin [OK]

Common Mistakes:

• Mixing up x and y for sides
• Using single side classes instead of axis
• Confusing padding and margin prefixes