Sizing utilities (width, height) in Bootsrap - Browser Rendering Trace

Render Flow - Sizing utilities (width, height)

[Load HTML with sizing classes] -> [Parse CSS sizing utilities] -> [Apply width/height styles] -> [Calculate layout with new sizes] -> [Paint elements with updated dimensions] -> [Composite final render]

The browser reads the HTML with Bootstrap sizing classes, applies the corresponding width and height CSS rules, recalculates layout based on these sizes, then paints and composites the elements with their new dimensions.

Render Steps - 4 Steps

Code Added:<div class="bg-primary text-white">Sized Box</div>

Before

[Container]

(empty space)

→

After

[Container]
[████████████████████████████████████████████████]
[█ Sized Box (blue background, white text)           █]
[████████████████████████████████████████████████]

Adding a div with background and text color shows a full-width block with default height wrapping the text.

🔧 Browser Action:Creates DOM node, applies background and text color styles, triggers paint.

Code Sample

A blue box sized to 50% width and 25% height of its container, with centered white text.

Bootsrap

<div class="w-50 h-25 bg-primary text-white d-flex align-items-center justify-content-center">
  Sized Box
</div>

Bootsrap

.w-50 { width: 50% !important; }
.h-25 { height: 25% !important; }
.bg-primary { background-color: #0d6efd !important; }
.text-white { color: #fff !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }

Render Quiz - 3 Questions

After applying the w-50 class (render_step 2), what happens to the box's width?

A It becomes half the width of its container

B It becomes twice the width of its container

C It stays full width

D It disappears

Common Confusions - 2 Topics

Why doesn't the height utility change the box height as expected?

Height percentages depend on the parent's height being set. If the parent has no height, 25% of 'auto' is zero, so the box stays small.

💡 Always ensure the parent container has a defined height for percentage heights to work (see render_step 3).

Why does the width utility shrink the box but text stays on one line?

Width changes the box size but text inside wraps or overflows depending on content and CSS. Here text fits inside the smaller width.

💡 Width controls container size; text adapts inside unless styled otherwise (see render_step 2).

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
width	w-25	horizontal	Sets width to 25% of parent container	Control element width responsively
width	w-50	horizontal	Sets width to 50% of parent container	Control element width responsively
width	w-75	horizontal	Sets width to 75% of parent container	Control element width responsively
height	h-25	vertical	Sets height to 25% of parent container	Control element height responsively
height	h-50	vertical	Sets height to 50% of parent container	Control element height responsively
height	h-75	vertical	Sets height to 75% of parent container	Control element height responsively

Concept Snapshot

Bootstrap sizing utilities control element width and height using classes like w-50 (50% width) and h-25 (25% height). Width percentages work relative to the parent container's width. Height percentages require the parent to have a defined height. Use flexbox classes (d-flex, align-items-center, justify-content-center) to center content inside sized boxes. These utilities help create responsive, well-sized elements quickly.

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