Module 39 : Alerts & Dismissible Alerts.
1. Introduction to Bootstrap Alerts
What is an Alert in Bootstrap?
Alerts are pre-styled message boxes used to:
• Show success messages
• Display warnings
• Report errors
• Provide information
Think of alerts as visual feedback for users.
Examples in websites:
✔ Login successful
✔ Payment failed
✔ Form submitted
✔ Server warning
Why Alerts Matter in UI/UX
Good alerts:
✔ Grab attention
✔ Communicate clearly
✔ Improve user experience
✔ Reduce confusion
Bad alerts = frustrated users
2. Basic Bootstrap Alert Structure
Bootstrap alert syntax:
<div class="alert alert-success"> This is a success alert! </div>
Structure breakdown:
Class
Purpose
alert
Base alert style
alert-success
Green success message
alert-danger
Red error
alert-warning
Yellow warning
alert-info
Blue info
3. Types of Bootstrap Alerts
<div class="alert alert-primary">Primary message</div> <div class="alert alert-secondary">Secondary message</div> <div class="alert alert-success">Success message</div> <div class="alert alert-danger">Error message</div> <div class="alert alert-warning">Warning message</div> <div class="alert alert-info">Information message</div> <div class="alert alert-light">Light background</div> <div class="alert alert-dark">Dark background</div>
UX meaning:
Color
Meaning
Green
Success
Red
Danger/Error
Yellow
Warning
Blue
Information
4. Advanced Alert Content
Alerts can contain:
✔ Headings
✔ Links
✔ Icons
✔ Long messages
Example:
<div class="alert alert-success"> <h4 class="alert-heading">Well done!</h4> <p>Your form has been successfully submitted.</p> <hr> <p class="mb-0">Thank you for using our service.</p> </div>
5. Dismissible Alerts (Close Button)
These allow users to close the alert.
Syntax:
<div class="alert alert-warning alert-dismissible fade show" role="alert"> This is a dismissible alert! <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div>
Explanation:
Part
Purpose
alert-dismissible
Enables closing
fade show
Animation
btn-close
Close icon
data-bs-dismiss
Bootstrap JS behavior
6. How Bootstrap Makes Dismissible Alerts Work
✔ Bootstrap JavaScript listens for button click
✔ Removes alert from DOM
✔ Applies fade animation
👉 This is why Bootstrap JS file must be included.
Basic Alerts
Objective:
Create all alert types.
Steps:
Create HTML file
Add Bootstrap CDN
Add alert elements
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4"> <div class="alert alert-success">Success</div> <div class="alert alert-danger">Error</div> <div class="alert alert-warning">Warning</div> <div class="alert alert-info">Info</div> </body> </html>
✔ Observation:
Notice spacing, color, and responsive behavior.
Dismissible Alert System
<div class="alert alert-primary alert-dismissible fade show"> Welcome to Bootstrap! <button class="btn-close" data-bs-dismiss="alert"></button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
✔ Result:
Alert disappears smoothly.
Dynamic Alerts with JavaScript
<button class="btn btn-success" onclick="showAlert()">Show Alert</button> <div id="alertBox"></div> <script> function showAlert(){ document.getElementById("alertBox").innerHTML = ` <div class="alert alert-success alert-dismissible fade show"> Data saved successfully! <button class="btn-close" data-bs-dismiss="alert"></button> </div> `; } </script>
✔ Learning:
• DOM manipulation
• Dynamic UI feedback
• web app behavior
📈 7. Applications
✔ Login notifications
✔ Shopping cart messages
✔ Form validation feedback
✔ API response messages
8. Research Section
How UX psychology connects color & alerts
Bootstrap JS behavior with DOM removal
Compare Bootstrap alerts vs custom CSS alerts
Performance impact of JS UI components
Tips
✅ Always use semantic role="alert"
✅ Keep messages short
✅ Never overload with many alerts
✅ Prioritize error alerts visually
No comments:
Post a Comment