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. |
Optionally, you can add a close button as in example below.
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.
<div class="alert alert-success collapse" id="myAlert1" role="alert">
<h4 class="alert-heading">Well done!
<button type="button"
class="close"
data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button></h4>
<p>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.</p>
<hr>
<p class="mb-0">Whenever you need to,
be sure to use margin utilities
to keep things nice and tidy.</p>
</div>
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. |
$('#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.