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.