Alerts are used to communicate errors, warnings, or any other state that may affect the user. Alerts may be used as banners or inline with content.
- Use alerts to communicate feedback related to user actions, system statuses, or alerts.
- Don’t use alerts to highlight important information within a content page, use callouts instead.
Global alert banners communicate a state that affects the entire system, not just a screen or feature. Alert banners persist over a session and appear automatically without being triggered by a user action. Only one alert banner should appear at any time and banners should only disappear when the issue they’re describing is resolved (they aren’t dismissable). Icons can be used with alert banners where they help with comprehension and context.
Global alerts should be displayed on the very top of all website pages in full width when active. See our sample page for an example.
Use inline alerts to tell users that important information is available, an error has occurred, or a task has been performed successfully. Icons can be used with inline alerts where they help with comprehension and context.
Warning messages should be informational but not alarming. Always communicate why the warning is present and what’s about to happen next.
Danger alerts let users know that something requires their attention. Keep error messages simple and direct and always communicate the corrective action or an alternative.
Success alerts let users know that they’ve completed a task, or that whatever they were trying to do was successful. They should be clear and to the point. Where it makes sense, success messages can also let users know what happens next.
Informational alerts contain information that might be useful to a user, but nothing that requires their attention.
Conveying meaning to assistive technologies
Using colour to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the colour is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.alert-link utility class to quickly provide styled links within any alert.
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
If you’ve already logged in today you’ll need to close and re-open all browser windows before logging in again.
We apologize for the inconvenience.
util.js. The compiled version includes this.
- Add a dismiss button and the
.alert-dismissibleclass, which adds extra padding to the right of the alert and positions the
- On the dismiss button, add the
<button>element with it for proper behaviour across all devices.
- To animate alerts when dismissing them, be sure to add the
You can see this in action with a live demo:
data attributes on a button within the alert, as demonstrated above:
Note that closing an alert will remove it from the DOM.
||Makes an alert listen for click events on descendant elements which have the
||Closes an alert by removing it from the DOM. If the
||Destroys an element’s alert.|
Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.
||This event fires immediately when the
||This event is fired when the alert has been closed (will wait for CSS transitions to complete).|