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">
<span>A simple primary alert—check it out!</span>
</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.
<div class="alert alert-primary" role="alert">
<span>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>
<div class="alert alert-success" role="alert">
<span>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>With icons
An example alert with an icon.
<div class="alert alert-info d-flex" role="alert">
<svg class="alert-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" aria-hidden="true">
<path
d="m10.29 3.86-8.18 14.18A2 2 0 0 0 3.82 21h16.36a2 2 0 0 0 1.73-2.96L13.19 3.86a2 2 0 0 0-2.9 0zM12 9v4M12 17h.01" />
</svg>
<div><span>An example alert with an icon.</span></div>
</div>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>
<span><strong>Holy guacamole!</strong> You should check in on some of those fields below.</span>
<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();
});