Modal sizes and positioning in Bootsrap - Performance & Optimization

Performance: Modal sizes and positioning

MEDIUM IMPACT

This affects the page's rendering speed and visual stability when modals appear, impacting how quickly users see and interact with modal content.

Displaying a modal with dynamic size and default positioning

Bootsrap

<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <!-- content -->
    </div>
  </div>
</div>

Using fixed modal sizes (e.g., modal-lg) and centered positioning reduces layout shifts and stabilizes modal appearance.

📈 Performance Gainsingle reflow on open, improved CLS score

Displaying a modal with dynamic size and default positioning

Bootsrap

<div class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- content -->
    </div>
  </div>
</div>

Default modal size and positioning can cause unexpected layout shifts and reflows when content size changes or viewport resizes.

📉 Performance Costtriggers multiple reflows on open and resize, causing CLS issues

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default modal with dynamic size	Moderate (modal + backdrop nodes)	Multiple reflows on open and resize	Medium paint cost due to layout shifts	[X] Bad
Modal with fixed size and centered positioning	Moderate (same nodes)	Single reflow on open	Lower paint cost, stable layout	[OK] Good

Rendering Pipeline

When a modal opens, the browser recalculates styles and layout for the modal and underlying page. Fixed sizes and centered positioning reduce layout recalculations and repaints.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

This affects the page's rendering speed and visual stability when modals appear, impacting how quickly users see and interact with modal content.

Optimization Tips

1Use Bootstrap modal size classes (modal-sm, modal-lg, modal-xl) to fix modal dimensions.

2Apply 'modal-dialog-centered' to vertically center modals and reduce layout shifts.

3Avoid dynamic resizing of modals after they open to prevent multiple reflows and CLS.

Performance Quiz - 3 Questions

What is the main performance issue with using dynamic modal sizes without fixed classes?

A It causes multiple layout recalculations and visual shifts.

B It increases JavaScript bundle size significantly.

C It blocks network requests for modal content.

D It disables keyboard navigation inside the modal.

DevTools: Performance

How to check: Open DevTools, go to Performance panel, record while opening modal, then analyze Layout and Paint events.

What to look for: Look for multiple Layout events and long Paint times indicating layout thrashing and visual instability.

Practice

1. Which Bootstrap class would you add to a modal dialog to make it appear smaller than the default size?

easy

A. modal-centered

B. modal-lg

C. modal-xl

D. modal-sm

Solution

1. Step 1: Understand modal size classes

   Bootstrap provides specific classes to control modal sizes: modal-sm for small, modal-lg for large, and modal-xl for extra large modals.

2. Step 2: Identify the class for smaller modal

   The class modal-sm is used to make the modal smaller than the default size.

3. Final Answer:

   <code>modal-sm</code> -> Option D

4. Quick Check:

   Small modal = modal-sm [OK]

Hint: Small modal uses modal-sm class [OK]

Common Mistakes:

• Using modal-lg or modal-xl for small size
• Confusing modal-centered with size classes
• Not adding any size class and expecting smaller modal

2. Which of the following is the correct way to center a Bootstrap modal vertically on the screen?

easy

A. Add modal-dialog-centered to the modal-dialog div

B. Add centered-modal to the modal div

C. Add modal-center to the modal-content div

D. Add modal-vertical to the modal-dialog div

Solution

1. Step 1: Identify the correct class for vertical centering

   Bootstrap uses the class modal-dialog-centered on the modal-dialog element to vertically center the modal.

2. Step 2: Verify the element to apply the class

   The class must be added to the modal-dialog div, not modal or modal-content.

3. Final Answer:

   Add modal-dialog-centered to the modal-dialog div -> Option A

4. Quick Check:

   Vertical center = modal-dialog-centered on modal-dialog [OK]

Hint: Use modal-dialog-centered on modal-dialog div [OK]

Common Mistakes:

• Adding centering class to wrong modal element
• Using non-existent classes like modal-center
• Confusing modal-dialog-centered with modal size classes

3. What will be the visual size of the modal dialog in this code snippet?

<div class="modal-dialog modal-xl">
  <div class="modal-content">
    <!-- Modal body -->
  </div>
</div>

medium

A. Small modal dialog

B. Default modal dialog size

C. Extra large modal dialog

D. Centered modal dialog

Solution

1. Step 1: Identify the size class used

   The class modal-xl is applied to the modal-dialog div, which sets the modal to extra large size.

2. Step 2: Understand the effect of modal-xl

   This class makes the modal wider than default and large sizes, so the modal will appear extra large on the screen.

3. Final Answer:

   Extra large modal dialog -> Option C

4. Quick Check:

   modal-xl = extra large modal [OK]

Hint: modal-xl class means extra large modal [OK]

Common Mistakes:

• Confusing modal-xl with modal-lg or modal-sm
• Thinking modal-xl centers the modal
• Ignoring the class and assuming default size

4. You want to make a modal vertically centered and large sized. Which of these code snippets correctly applies both features?

A) <div class="modal-dialog modal-lg modal-dialog-centered">
B) <div class="modal-dialog modal-centered modal-lg">
C) <div class="modal-dialog modal-lg-centered">
D) <div class="modal-dialog modal-lg center-dialog">

medium

A. A

B. B

C. C

D. D

Solution

1. Step 1: Check correct Bootstrap classes for size and centering

   The correct classes are modal-lg for large size and modal-dialog-centered for vertical centering.

2. Step 2: Verify the class names and order

   A uses both classes correctly on the modal-dialog div. Other options use incorrect or non-existent classes.

3. Final Answer:

   Option A -> Option A

4. Quick Check:

   modal-lg + modal-dialog-centered = A [OK]

Hint: Combine modal-lg and modal-dialog-centered on modal-dialog [OK]

Common Mistakes:

• Using wrong class names like modal-centered or modal-lg-centered
• Placing classes on wrong elements
• Missing one of the required classes

5. You want to create a responsive modal that is small on mobile, large on tablets, and extra large on desktops, and also vertically centered. Which Bootstrap classes should you apply to the modal-dialog to achieve this?

hard

A. modal-dialog modal-sm modal-lg modal-xl modal-dialog-centered

B. modal-dialog modal-dialog-centered plus custom CSS media queries for sizes

C. modal-dialog modal-dialog-centered modal-sm modal-lg modal-xl

D. modal-dialog modal-dialog-centered modal-sm modal-lg modal-xl with responsive utility classes for each breakpoint

Solution

1. Step 1: Understand Bootstrap modal size classes

   Bootstrap modal size classes like modal-sm, modal-lg, and modal-xl are not responsive by themselves and cannot be combined to change size at different screen widths.

2. Step 2: Identify how to make modal responsive

   To have different modal sizes on different devices, you must use modal-dialog-centered for vertical centering and write custom CSS media queries to adjust modal width responsively.

3. Final Answer:

   modal-dialog modal-dialog-centered plus custom CSS media queries for sizes -> Option B

4. Quick Check:

   Responsive modal sizes require custom CSS + modal-dialog-centered [OK]

Hint: Use modal-dialog-centered plus CSS media queries for responsiveness [OK]

Common Mistakes:

• Trying to combine multiple size classes on modal-dialog
• Assuming Bootstrap size classes are responsive by default
• Not adding vertical centering class