Spacing utilities (margin, padding) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a margin of 3 units on all sides of the div.

Bootsrap

<div class="[1]">Content</div>

Drag options to blanks, or click blank then click option'

Am-3

Bp-3

Cmt-3

Dmx-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding class p-3 instead of margin.

Using only top margin mt-3 which affects one side.

Using horizontal margin mx-3 which affects only left and right.

The class m-3 adds margin on all sides with a spacing scale of 3.

2fill in blank

medium

Complete the code to add padding of 4 units only on the left side of the paragraph.

Bootsrap

<p class="[1]">This is a paragraph.</p>

Drag options to blanks, or click blank then click option'

Aps-4

Bpr-4

Cpb-4

Dpt-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using right padding pr-4 instead of left.

Using top or bottom padding classes.

Confusing margin and padding classes.

The class ps-4 adds padding only on the left side with spacing scale 4.

3fill in blank

hard

Fix the error in the code to add horizontal margin of 2 units to the button.

Bootsrap

<button class="btn btn-primary [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Apy-2

Bmx-2

Cm-2

Dmy-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using vertical margin my-2 instead of horizontal.

Using padding classes py-2 instead of margin.

Using all sides margin m-2 which affects more than horizontal.

The class mx-2 adds margin on left and right (horizontal) with spacing 2.

4fill in blank

hard

Fill both blanks to add padding of 1 unit on top and margin of 5 units on bottom of the div.

Bootsrap

<div class="[1] [2]">Box</div>

Drag options to blanks, or click blank then click option'

Apt-1

Bmb-5

Cmt-5

Dpb-1

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing padding and margin sides incorrectly.

Using wrong spacing numbers.

Using bottom padding instead of margin.

pt-1 adds padding on top with spacing 1, and mb-5 adds margin on bottom with spacing 5.

5fill in blank

hard

Fill all three blanks to create a div with margin top 4, padding right 3, and margin left 2.

Bootsrap

<div class="[1] [2] [3]">Content</div>

Drag options to blanks, or click blank then click option'

Amt-4

Bpr-3

Cml-2

Dpb-2

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing padding and margin sides.

Using wrong spacing numbers.

Using bottom padding instead of right padding.

mt-4 adds margin on top with spacing 4, pr-3 adds padding on right with spacing 3, and ml-2 adds margin on left with spacing 2.

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