0
0
Bootsrapmarkup~8 mins

Dismissible alerts in Bootsrap - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Inline style hide on click1 element style change1 reflow per dismissal1 repaint[X] Bad
Bootstrap dismissible alert with fadeElement removed after fade1 reflow with transition1 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
Test your performance knowledge
What is the main performance benefit of using Bootstrap's dismissible alerts over manually hiding alerts with inline styles?
AThey block rendering until the alert is removed.
BThey use CSS transitions to reduce layout shifts and repaint costs.
CThey add more DOM elements for better control.
DThey 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.