Alerts provide user feedback based on certain actions. These actions can help explain to a user that they've successfully done a task, or possibly messed one up.
All alerts are built with the .alert class, and are styled by modifier classes.
For example, here's an info alert with a-is-primary class with an icon to the right.
EXAMPLE
This is some important information so please pay attention.
<div class="alert a-is-info">
<p>This is some <strong>important information</strong> so please pay attention.<span class="fa fa-info"></span></p>
</div>Have the flexibility to remove alerts from the DOM, or, for validation purposes for example, just hide them so they're not visible. Here's an example of the Jquery.
$('.close').click(function(e) {
var elem = $(e.currentTarget).parents('.alert-removed');
elem.removeClass('in');
setTimeout(function () {
elem.remove();
}, 450);
});
// This just hides the element
$('.close').click(function(e){
var hiding = $(e.currentTarget).parents('.alert-hide');
hiding.removeClass('in');
});EXAMPLE
Click the X to remove this alert. Use class .alert-removed
to remove this alert ×
Click the X to hide this alert. Use class .alert-hide
to hide this alert ×
<div class="alert a-is-danger alert-removed fade in">
…
</div>
<div class="alert a-is-success alert-hide fade in">
…
</div>
</div>Create alerts that have links and content, such as buttons.
EXAMPLE
<div class="alert a-is-danger alert-removed fade in">
<span class="close">X</span>
<h4>No Success!</h4>
<p><a href="#">Go here for more info</a></p>
<p>
<button class="btn btn-danger">Do Some Action</button>
<button class="btn btn-link">Cancel</button>
</p>
</div>