Bs5 Alerts in Bootstrap
In Bootstrap 5 (BS5), alerts are components used to provide feedback messages like success, warning, error, or information messages. They are styled using contextual classes and can be made dismissible.
? Basic Alert
<div class="alert alert-primary" role="alert"> This is a primary alert—check it out!</div>? Alert Contextual Classes
Use different classes for different types of alerts:
| Class | Purpose |
|---|---|
alert-primary | Informational alert |
alert-secondary | Less emphasis |
alert-success | Success message |
alert-danger | Error or danger alert |
alert-warning | Warning alert |
alert-info | Informational alert |
alert-light | Subtle info |
alert-dark | Dark themed info |
? Dismissible Alert
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Warning!</strong> You should check this out. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>alert-dismissible: Adds padding and close button positionfade show: Adds animationbtn-close: Bootstrap's close buttondata-bs-dismiss="alert": Triggers the dismiss action
?? JavaScript (Optional)
Bootstrap's alert component can be controlled with JavaScript if needed.
// Manually close alertvar myAlert = document.querySelector('.alert');var bsAlert = new bootstrap.Alert(myAlert);bsAlert.close();? Additional Notes
Requires Bootstrap 5 JavaScript for dismiss functionality (via bundle or separate files).
Works with custom content, including links, headings, and more.
Would you like examples with links, icons, or alerts inside modals/cards?
