Scrollable and centered modals in Bootsrap - Performance & Optimization

Performance: Scrollable and centered modals

MEDIUM IMPACT

This affects page interaction speed and visual stability when modals appear and scroll within the viewport.

Creating a modal that is scrollable and vertically centered on the screen

Bootsrap

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

Using Bootstrap's scrollable and centered classes keeps modal content contained and stable, reducing layout shifts and improving user experience.

📈 Performance GainSingle reflow on modal open, minimal CLS, smooth scrolling inside modal.

Creating a modal that is scrollable and vertically centered on the screen

Bootsrap

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

This modal is not scrollable and not vertically centered, causing content overflow and layout shifts when content is large.

📉 Performance CostTriggers multiple reflows on content overflow and causes CLS due to layout shifts.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Basic modal without scrollable or centered classes	Low (few nodes)	Multiple reflows on large content overflow	High due to layout shifts	[X] Bad
Modal with modal-dialog-scrollable and modal-dialog-centered classes	Low (few nodes)	Single reflow on open	Low paint cost with stable layout	[OK] Good

Rendering Pipeline

When a scrollable and centered modal opens, the browser calculates styles, layouts the modal dialog centered vertically, and enables internal scrolling without affecting the page layout.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to vertical centering and scroll container sizing

Core Web Vital Affected

CLS

This affects page interaction speed and visual stability when modals appear and scroll within the viewport.

Optimization Tips

1Use modal-dialog-scrollable to keep modal content scrollable inside the viewport.

2Use modal-dialog-centered to vertically center modals and avoid layout shifts.

3Avoid forcing page scroll when modal content overflows to reduce reflows and CLS.

Performance Quiz - 3 Questions

What is the main performance benefit of using Bootstrap's modal-dialog-scrollable class?

A It enables scrolling inside the modal without causing page layout shifts.

B It reduces the modal's file size.

C It disables scrolling on the entire page.

D It automatically lazy loads modal content.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while opening the modal with large content, then analyze Layout and Paint events.

What to look for: Look for minimal layout thrashing and stable paint times; check for CLS score in Lighthouse for visual stability.