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.
• Guidelines for using alerts and callouts on City of Winnipeg websites and applications.

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.

<div class="global-alert-container">
  <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>
</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">
  It may take up to 10 business days for your application to be reviewed. 
</div>

Link colour

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

$('.alert').alert('close')

Events

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})