Dismissible alerts in Bootsrap - Performance & Optimization

Performance: Dismissible alerts

MEDIUM IMPACT

This affects page interaction responsiveness and visual stability when users close alert messages.

Creating alerts that users can close without causing layout shifts or slow interactions

Bootsrap

<div class="alert alert-warning alert-dismissible fade show" role="alert">Warning!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>

Bootstrap's built-in dismissible alert uses CSS transitions and removes the element cleanly, reducing layout shifts.

📈 Performance GainSingle reflow with smooth fade-out, minimal CLS, and better interaction responsiveness.

Creating alerts that users can close without causing layout shifts or slow interactions

Bootsrap

<div class="alert alert-warning" role="alert">Warning!<button onclick="this.parentElement.style.display='none'">Close</button></div>

Directly hiding the alert with inline style triggers layout recalculation and can cause cumulative layout shift (CLS).

📉 Performance CostTriggers 1 reflow and 1 repaint per dismissal, causing noticeable layout shift.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline style hide on click	1 element style change	1 reflow per dismissal	1 repaint	[X] Bad
Bootstrap dismissible alert with fade	Element removed after fade	1 reflow with transition	1 repaint with transition	[OK] Good

Rendering Pipeline

Dismissible alerts affect the Layout and Paint stages when the alert is removed or hidden. Using CSS transitions delays layout recalculation and reduces abrupt changes.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation due to element removal or hiding

Core Web Vital Affected

INP, CLS

This affects page interaction responsiveness and visual stability when users close alert messages.

Optimization Tips

1Use CSS transitions for alert dismissal to reduce layout shifts.

2Avoid inline style changes that hide alerts abruptly.

3Leverage Bootstrap's built-in dismissible alert features for better performance and accessibility.

Performance Quiz - 3 Questions

What is the main performance benefit of using Bootstrap's dismissible alerts over manually hiding alerts with inline styles?

A They block rendering until the alert is removed.

B They use CSS transitions to reduce layout shifts and repaint costs.

C They add more DOM elements for better control.

D They increase bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while dismissing alerts. Look for layout and paint events triggered by alert removal.

What to look for: Check for minimal layout shifts and smooth fade animations indicating good performance.