Alerts
Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional dismiss button.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>Link color
Use the .alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
With icons
An example alert with an icon.
Dismissing
Add a dismiss button and the optional .alert-dismissible utility class, then use
data-boodoo-alert + data-boodoo-dismiss="alert" to wire up the close button.
Holy guacamole! You should check in on some of those fields below.
<div class="alert alert-warning alert-dismissible fade show" role="alert" data-boodoo-alert>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-boodoo-dismiss="alert" aria-label="Close"></button>
</div>JavaScript behavior
Alerts can also be dismissed programmatically:
// Close all alerts
document.querySelectorAll('.alert[data-boodoo-alert]').forEach(function (el) {
boodoo.Alert.getOrCreateInstance(el).hide();
});