Sizing utilities (width, height) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the div to 50%.

Bootsrap

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

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

A50

B25

C75

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using w-5 which is not a valid Bootstrap width class.

Forgetting to add the w- prefix.

The class w-50 sets the width of the element to 50% of its parent container.

2fill in blank

medium

Complete the code to set the height of the div to 25%.

Bootsrap

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

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

A25

B100

C50

D75

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-2 which is not a valid Bootstrap height class.

Confusing width and height classes.

The class h-25 sets the height of the element to 25% of its parent container.

3fill in blank

hard

Fix the error in the code to make the div full width.

Bootsrap

<div class="[1]">Full width content</div>

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

Afull-width

Bwidth-100

Cw-100

Dw-full

Attempts:

3 left

💡 Hint

Common Mistakes

Using width-100 which is not a Bootstrap class.

Using Tailwind CSS classes like w-full which do not work in Bootstrap.

The correct Bootstrap class for full width is w-100. Other options are not valid Bootstrap classes.

4fill in blank

hard

Fill both blanks to set the div width to 75% and height to 50%.

Bootsrap

<div class="[1] [2]">Sized box</div>

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

Aw-75

Bh-25

Ch-50

Dw-50

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up width and height classes.

Using h-25 instead of h-50.

The class w-75 sets width to 75%, and h-50 sets height to 50%.

5fill in blank

hard

Fill all three blanks to create a div with width 100%, height 25%, and add a border.

Bootsrap

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

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

Aw-100

Bh-25

Cborder

Dborder-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-1 instead of border.

Forgetting to add the border class.

w-100 sets full width, h-25 sets height to 25%, and border adds a border around the div.