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.