Sizing utilities (width, height) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap width utility classes

Which Bootstrap class will set an element's width to 50% of its parent container?

A w-5

B width-50

C w-half

D w-50

💡 Hint

Bootstrap uses 'w-' prefix followed by a number to set width in percentages.

The class w-50 sets the width to 50% of the parent container. Other options are not valid Bootstrap width utilities.

📝 Syntax

intermediate

Correct usage of height utility classes

Which class correctly sets an element's height to 100% in Bootstrap?

A h-100

B height-100

C h-full

D height-full

💡 Hint

Bootstrap height utilities use 'h-' prefix with numbers.

The class h-100 sets the height to 100%. Other options are not valid Bootstrap classes.

❓ rendering

advanced

Visual effect of combined width and height utilities

What will be the visible size of a <div> with classes w-25 h-50 bg-primary inside a container of 400px width and 300px height?

Bootsrap

<div class="container" style="width:400px; height:300px; border:1px solid black;"><div class="w-25 h-50 bg-primary"></div></div>

A Width: 25px, Height: 150px, Blue background

B Width: 25px, Height: 50px, Blue background

C Width: 100px, Height: 150px, Blue background

D Width: 100px, Height: 50px, Blue background

💡 Hint

Calculate 25% of 400px and 50% of 300px.

The w-25 sets width to 25% of 400px = 100px. The h-50 sets height to 50% of 300px = 150px. The bg-primary adds a blue background.

❓ selector

advanced

Choosing the correct class for max-width

Which Bootstrap class sets the maximum width of an element to 100% of its parent container?

A max-w-100

B mw-100

C maxwidth-100

D mw-full

💡 Hint

Bootstrap uses 'mw-' prefix for max-width utilities.

The class mw-100 sets max-width to 100%. Other options are not valid Bootstrap classes.

❓ accessibility

expert

Accessibility considerations with sizing utilities

When using fixed width and height utilities like w-25 and h-50 on interactive elements, what is the best practice to maintain accessibility?

A Ensure the element has sufficient size for easy clicking and add ARIA labels if needed

B Set width and height to fixed pixel values instead of percentages for consistency

C Use only width utilities and avoid height utilities to prevent confusion

D Avoid using any sizing utilities on interactive elements to prevent layout shifts

💡 Hint

Think about how users interact with elements and screen readers.

Fixed sizes can make elements too small to interact with. Ensuring sufficient size and adding ARIA labels helps users with disabilities. Other options either limit flexibility or are impractical.

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