Bootstrap 4 provides alerts, which are used to display important messages, warnings, or notifications on a webpage. Alerts are dismissible, customizable, and come with different styles.
What This Tutorial Covers:
- Basic Bootstrap 4 alert
- Different alert types
- Dismissing alerts
- Adding icons to alerts
- Customizing alerts with colors and animation
1. Basic Bootstrap 4 Alert
The .alert class is used to create an alert. It requires an alert type class such as .alert-success, .alert-danger, etc.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Alerts</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="alert alert-primary" role="alert">
This is a primary alert message!
</div>
</div>
</body>
</html>
Key Points:
- The .alert class applies the alert styling.
- The role=”alert” attribute improves accessibility.
- Bootstrap provides different alert colors for various purposes.
2. Different Alert Types
Bootstrap 4 offers multiple predefined alert classes for different purposes.
Example:
<div class="container mt-4">
<div class="alert alert-primary">Primary Alert - Informational Message</div>
<div class="alert alert-secondary">Secondary Alert - Neutral Message</div>
<div class="alert alert-success">Success Alert - Operation Completed</div>
<div class="alert alert-danger">Danger Alert - Error or Warning</div>
<div class="alert alert-warning">Warning Alert - Caution Needed</div>
<div class="alert alert-info">Info Alert - Additional Information</div>
<div class="alert alert-light">Light Alert - Soft Message</div>
<div class="alert alert-dark">Dark Alert - Strong Message</div>
</div>
Alert Color Classes:
| Alert Class | Description |
|---|---|
| .alert-primary | Blue color for informational messages |
| .alert-secondary | Gray color for neutral messages |
| .alert-success | Green color for success messages |
| .alert-danger | Red color for error or warning messages |
| .alert-warning | Yellow color for caution messages |
| .alert-info | Light blue for additional information |
| .alert-light | White/light gray alert |
| .alert-dark | Dark gray/black alert |
3. Dismissing Alerts (Close Button)
You can make an alert dismissible by adding:
- The .alert-dismissible class
- A close button using the button element with .close class and data-dismiss=”alert”
Example:
<div class="container mt-4">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
This is a dismissible alert! Click the close button to remove it.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Explanation:
- .alert-dismissible makes the alert closable.
- .fade.show enables a smooth fade-out effect when dismissed.
- The close button uses:
- data-dismiss=”alert” to trigger dismissal.
- × (× symbol) to represent the close icon.
4. Adding Icons to Alerts
Icons enhance the appearance of alerts. Bootstrap 4 does not include built-in icons, but we can use Font Awesome or custom icons.
Example using Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="container mt-4">
<div class="alert alert-success">
<i class="fas fa-check-circle"></i> Success! Your action was completed.
</div>
<div class="alert alert-danger">
<i class="fas fa-exclamation-triangle"></i> Warning! Something went wrong.
</div>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> Info: Here is some additional information.
</div>
</div>
Explanation:
- fas fa-check-circle → Success icon
- fas fa-exclamation-triangle → Warning icon
- fas fa-info-circle → Information icon
5. Customizing Alert Background Colors
You can modify alert colors using inline styles or custom CSS.
Example:
<div class="container mt-4">
<div class="alert" style="background-color: #ffcc00; color: black;">
Custom Yellow Alert
</div>
</div>
Example with CSS:
<style>
.custom-alert {
background-color: #ff5733;
color: white;
border: 2px solid #cc2900;
}
</style>
<div class="container mt-4">
<div class="alert custom-alert">
This is a custom-styled alert!
</div>
</div>
6. Animated Alerts with jQuery
Bootstrap alerts can be animated using jQuery.
Example:
<div class="container mt-4">
<div id="animatedAlert" class="alert alert-info">
This alert will disappear in 5 seconds.
</div>
</div>
<script>
setTimeout(function() {
$("#animatedAlert").fadeOut(1000);
}, 5000);
</script>
This alert fades out automatically after 5 seconds.
7. Bootstrap Alert in a Button Click Event
You can trigger an alert dynamically using jQuery.
Example:
<button class="btn btn-primary" id="showAlert">Show Alert</button>
<div class="container mt-4">
<div id="dynamicAlert" class="alert alert-success" style="display: none;">
This is a dynamically added alert.
</div>
</div>
<script>
$("#showAlert").click(function() {
$("#dynamicAlert").fadeIn();
});
</script>
Explanation:
- Clicking the button shows the alert using fadeIn().
8. Alerts Inside a Card
Alerts can be placed inside Bootstrap cards for better UI.
Example:
<div class="container mt-4">
<div class="card">
<div class="card-header">Notification</div>
<div class="card-body">
<div class="alert alert-info">
This is an alert inside a card.
</div>
</div>
</div>
</div>
Conclusion
Bootstrap 4 alerts provide a simple way to display notifications, warnings, and error messages.
