Sizing utilities (width, height) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class w-50 do?

It sets the element's width to 50% of its parent container's width.

beginner

How do you make an element take the full height of its parent using Bootstrap sizing utilities?

Use the class h-100 to set the element's height to 100% of its parent.

intermediate

What is the difference between w-auto and w-100 in Bootstrap?

w-auto sets the width to auto, letting content decide size. w-100 forces width to 100% of the parent container.

beginner

Which Bootstrap class sets an element's height to 25% of its parent?

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

beginner

How can you set an element's width to 75% using Bootstrap sizing utilities?

Use the class w-75 to set the width to 75% of the parent container.

Which Bootstrap class sets an element's width to 100%?

A h-100

B w-100

C w-auto

D h-auto

w-100 sets width to 100%. h-100 sets height to 100%. w-auto lets width adjust to content.

What does the class h-50 do in Bootstrap?

A Sets height to 50 pixels

B Sets width to 50% of parent

C Sets height to 50% of parent

D Sets height to auto

h-50 sets the element's height to 50% of its parent container.

If you want an element's width to adjust based on its content, which class should you use?

A w-auto

B w-100

C h-auto

D h-100

w-auto lets the width adjust automatically based on content size.

Which class sets an element's height to 25% of its parent container?

A w-75

B w-25

C h-75

D h-25

h-25 sets height to 25% of the parent container.

What is the effect of the class w-75 in Bootstrap?

A Width is 75% of parent

B Height is 75% of parent

C Width is 25% of parent

D Height is 25% of parent

w-75 sets the width to 75% of the parent container.

Explain how Bootstrap sizing utilities help control element width and height.

Think about how you can quickly set sizes without writing custom CSS.

Describe a real-life example where you might use Bootstrap's width and height utilities.

Imagine building a webpage layout with columns or images.

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