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.