Alerts
| css class | description |
|---|---|
| alert | Specifies the alert window. You should add the role="alert" attribute. You can add class collapse to hide it from user. Useful when you need to reuse an alert. In this case, you need to hide the alert, not close it. |
| alert-success | Specifies the success alert. There are other types:
|
| alert-link | Provides matching colored links within any alert. Applies to the <a> element. |
| alert-heading | Specifies the title of the alert. Applies to the element with title text. |
dismissing
- Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
- add alert-dismissible to alert
- add data-bs-dismiss="alert" to close button
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
methods
An element with class alert has a method alert() that implements the entire API associated with alerts. You can use the corresponding jQuery show()/hide() methods to show/hide alerts.
| method | description |
|---|---|
| close() | Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. |
| alert('close') | Closes an alert by removing it from the DOM. |
| alert('dispose') | Destroys an element’s alert. |
// create an alert instance with the alert constructor
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
$('#myAlert').show();
$('.alert').alert('close');events
| event name | description |
|---|---|
| close.bs.alert | Fires immediately when the close instance method is called. |
| closed.bs.alert | Fires when the alert has been closed, it will wait for CSS transitions to complete. |
auto hiding
It is easy reuse and auto hide alert with jQuery.
$("#myAlert2").fadeTo(2000, 500).slideUp(500, function(){ // optional parameter
// Do something when the animation finishes
});Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.