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.