Sizing utilities (width, height) in Bootsrap - Performance & Optimization

Performance: Sizing utilities (width, height)

MEDIUM IMPACT

Sizing utilities affect layout calculation and paint times by changing element dimensions, impacting page rendering speed and visual stability.

Setting element width and height responsively using Bootstrap utilities

Bootsrap

<div class="w-50 h-25"></div>

Using only Bootstrap sizing utilities ensures consistent, cacheable CSS classes and fewer style recalculations.

📈 Performance GainSingle reflow with predictable layout, reducing CLS and improving rendering speed.

Setting element width and height responsively using Bootstrap utilities

Bootsrap

<div class="w-100 h-100" style="width: 500px; height: 300px;"></div>

Inline styles override utilities causing inconsistent sizing and extra style recalculations.

📉 Performance CostTriggers multiple reflows due to conflicting styles and forces layout thrashing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using inline styles with sizing utilities	Low	Multiple reflows due to style conflicts	High paint cost from layout thrashing	[X] Bad
Using only Bootstrap sizing utility classes	Low	Single reflow	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Sizing utilities set width and height via CSS classes, affecting the Style Calculation and Layout stages, which then trigger Paint and Composite.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout is most expensive because changing size forces recalculation of element positions and sizes.

Core Web Vital Affected

CLS

Sizing utilities affect layout calculation and paint times by changing element dimensions, impacting page rendering speed and visual stability.

Optimization Tips

1Avoid mixing inline styles with sizing utility classes to prevent layout thrashing.

2Use Bootstrap sizing utilities consistently for predictable and efficient layout.

3Minimize layout shifts by setting stable widths and heights to improve CLS.

Performance Quiz - 3 Questions

What is the main performance risk when mixing inline styles with Bootstrap sizing utilities?

A It improves paint speed.

B It causes multiple reflows and layout thrashing.

C It reduces CSS file size.

D It disables browser caching.

DevTools: Performance

How to check: Record a performance profile while resizing or loading the page. Look for Layout and Recalculate Style events.

What to look for: Multiple Layout events indicate inefficient sizing changes; fewer and shorter Layout events indicate better performance.

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