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.

Practice

1. Which Bootstrap class sets an element's width to 50% of its parent container?

easy

A. w-50

B. h-50

C. w-100

D. h-100

Solution

1. Step 1: Understand width and height prefixes

   Bootstrap uses w- for width and h- for height classes.

2. Step 2: Identify the class for 50% width

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

3. Final Answer:

   <code>w-50</code> -> Option A

4. Quick Check:

   Width 50% = w-50 [OK]

Hint: Width classes start with w-, height with h- [OK]

Common Mistakes:

• Confusing width (w-) with height (h-)
• Using w-100 instead of w-50
• Assuming h-50 sets width

2. Which of the following is the correct Bootstrap class to set an element's height to 100% of the viewport height?

easy

A. h-vh-100

B. h-100

C. h-100vh

D. vh-100

Solution

1. Step 1: Recall Bootstrap height classes

   Bootstrap uses h-100 to set height to 100% of the parent container.

2. Step 2: Viewport height in Bootstrap

   Bootstrap does not have a class vh-100 to set height to 100vh. To set height to viewport height, custom CSS or utility classes are needed.

3. Final Answer:

   <code>h-100</code> -> Option B

4. Quick Check:

   Height 100% of parent = h-100 [OK]

Hint: Use h-100 for height 100% of parent [OK]

Common Mistakes:

• Using h-vh-100 or h-100vh which are invalid
• Assuming vh-100 is a Bootstrap class
• Confusing viewport height with parent height

3. What will be the width of the <div class='w-75'></div> element relative to its parent container?

medium

A. 25% of the parent container

B. 50% of the parent container

C. 100% of the parent container

D. 75% of the parent container

Solution

1. Step 1: Understand the meaning of w-75

   The class w-75 sets the element's width to 75% of its parent container.

2. Step 2: Compare options with the class effect

   Only 75% of the parent container correctly states 75% width relative to the parent.

3. Final Answer:

   75% of the parent container -> Option D

4. Quick Check:

   w-75 means width 75% [OK]

Hint: Class w-XX means width XX% [OK]

Common Mistakes:

• Mixing up 75% with 25%
• Thinking w-75 means height
• Assuming w-75 means 100% width

4. You want to set an element's height to 25% using Bootstrap classes, but your code <div class='w-25'></div> does not work as expected. What is the error?

medium

A. Using width class w-25 instead of height class h-25

B. Missing a custom CSS for height

C. Bootstrap does not support height utilities

D. Class w-25 sets height, so no error

Solution

1. Step 1: Identify the class used

   The class w-25 sets width to 25%, not height.

2. Step 2: Correct the class for height

   To set height to 25%, use h-25 instead of w-25.

3. Final Answer:

   Using width class w-25 instead of height class h-25 -> Option A

4. Quick Check:

   Height needs h-25, not w-25 [OK]

Hint: Use h-XX for height, w-XX for width [OK]

Common Mistakes:

• Confusing width and height classes
• Assuming w-25 affects height
• Thinking Bootstrap lacks height utilities

5. You want a responsive box that is 100% wide on small screens but only 50% wide on medium and larger screens using Bootstrap sizing utilities. Which class combination achieves this?

hard

A. h-100 w-md-50

B. w-50 w-md-100

C. w-100 w-md-50

D. w-100 h-md-50

Solution

1. Step 1: Understand responsive sizing classes

   Bootstrap uses breakpoint prefixes like md to apply styles at medium screen sizes and above.

2. Step 2: Choose classes for width at different breakpoints

   w-100 sets width 100% on all screens, but w-md-50 overrides width to 50% on medium and larger screens.

3. Step 3: Verify other options

   Options B, C, and D either reverse the sizes or mix height and width incorrectly.

4. Final Answer:

   <code>w-100 w-md-50</code> -> Option C

5. Quick Check:

   Responsive width: w-100 then w-md-50 [OK]

Hint: Use breakpoint prefixes like w-md-50 for responsive widths [OK]

Common Mistakes:

• Mixing height and width classes
• Reversing breakpoint order
• Not using breakpoint prefixes for responsiveness