Alerts

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.

Best practices

  • 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 alerts

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.

A flood warning has been issued for all south east and south west neighbourhoods.
<div class="global-alert">
  <div class="container">
    <span><i aria-label="Emergency icon" class="far fa-exclamation-triangle mr-2"></i>A <a href="#">flood warning</a> has been issued for all south east and south west neighbourhoods.</span>
  </div>
</div>

Inline alerts

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

Warning messages should be informational but not alarming. Always communicate why the warning is present and what’s about to happen next.

<div class="alert alert-warning" role="alert">
  You must have a water meter that records consumption in cubic metres (m3) to use this calculator. 
</div>

Danger

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.

<div class="alert alert-danger" role="alert">
  Your username is incorrect, please try again. 
</div>

Success

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.

<div class="alert alert-success" role="alert">
  <i class="far fa-thumbs-up"></i> You have successfully created an account!
</div>

Information

Informational alerts contain information that might be useful to a user, but nothing that requires their attention.

<div class="alert alert-info" role="alert">
  Selecting one of the following links will scroll this page to the relevant section below. 
</div>

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 .sr-only class.

Use the .alert-link utility class to quickly provide styled links within any alert.

<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>.
</div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Returning visitors</h4>
  <p>If you’ve already logged in today you’ll need to close and re-open all browser windows before logging in again.</p>
  <p>We apologize for the inconvenience.</p>
</div>

Dismissing

Using Bootstrap’s alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • If you’re building our JavaScript from source, it requires util.js. The compiled version includes this.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behaviour across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript behaviour

Triggers

Enable dismissal of an alert via JavaScript:

$('.alert').alert()

Or with data attributes on a button within the alert, as demonstrated above:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Note that closing an alert will remove it from the DOM.

Methods

Method Description
$().alert() Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
$().alert('dispose') Destroys an element’s alert.
$('.alert').alert('close')

Events

Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event Description
close.bs.alert This event fires immediately when the close instance method is called.
closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete).
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})