Examples

Alerts are available for any length of text, as well as an optional dismiss button. Alerts are capped at 900px width.

Success: Confirmation that an action was performed successfully

Informational: The user might want to know a new piece of information, but it’s not critical

Notification: Something has been changed or updated, and the user might be interested, but it’s not critical

Warning: Something critical has changed and the user needs to know; or, the user is about to do something permanent and destructive, like a delete

Error: Something has gone wrong, and the user needs this information, often to act upon

<p><strong>Success:</strong> Confirmation that an action was performed successfully</p>
<div class="alert alert-success mb-5" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Success Alert Title</p>
    <p class="mb-0">A simple alert — check it out!</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<p><strong>Informational:</strong> The user might want to know a new piece of information, but it’s not critical</p>
<div class="alert alert-informational mb-5" role="alert">
  <i class="far fa-info-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Informational Alert Title</p>
    <p class="mb-0">A simple alert — check it out!</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<p><strong>Notification:</strong> Something has been changed or updated, and the user might be interested, but it’s not critical</p>
<div class="alert alert-notification mb-5" role="alert">
  <i class="far fa-bell"></i>
  <div>
    <p class="font-weight-bold mb-0">System Notification Alert Title</p>
    <p class="mb-0">A simple alert — check it out!</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<p><strong>Warning:</strong> Something critical has changed and the user needs to know; or, the user is about to do something permanent and destructive, like a delete</p>
<div class="alert alert-warning mb-5" role="alert">
  <i class="far fa-exclamation-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Warning Alert Title</p>
    <p class="mb-0">A simple alert — check it out!</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<p><strong>Error:</strong> Something has gone wrong, and the user needs this information, often to act upon</p>
<div class="alert alert-error mb-5" role="alert">
  <i class="far fa-exclamation-triangle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Error Alert Title</p>
    <p class="mb-0">A simple alert — check it out!</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->

Examples with Links

Alerts have two options for including links. There is a second option to include a CTA on the right side instead of the ❌ close button.

<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Success Alert Title</p>
    <p class="mb-0">This older model has been phased out of production. We are stocking a replacement part for this in the <a href="#">Gas Furnace category</a>.</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Success Alert Title</p>
    <p class="mb-0">This tool is old now. <a href="#">The new one</a> is much better.</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Success Alert Title</p>
    <p class="mb-0">This older model has been phased out. We are stocking a replacement part for this.</p>
  </div>
  <a href="#" class="btn btn-primary ml-4">Shop Now</a>
</div><!-- end alert -->


<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Success Alert Title</p>
    <p class="mb-0">This older model has been phased out of production.</p>
  </div>
  <a href="#" class="btn btn-secondary ml-4">Buy Something Else</a>
</div><!-- end alert -->

Multiple Options

<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="mb-0">A simple alert without a title and no dismiss button</p>
  </div>
</div><!-- end alert -->


<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="font-weight-bold mb-0">System Informational Alert Title</p>
    <p class="mb-0">A much longer alert with extra content here. This will wrap when the text gets too long to show on a single alert. A much longer alert with extra content here. This will wrap when the text gets too long to show on a single alert. A much longer alert with extra content here. This will wrap when the text gets too long to show on a single alert.</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->


<div class="alert alert-success" role="alert">
  <i class="far fa-check-circle"></i>
  <div>
    <p class="mb-0">A simple alert without a title but including the dismiss button</p>
  </div>
  <button type="button" class="btn" data-dismiss="alert" aria-label="Close"><i class="far fa-times"></i></button>
</div><!-- end alert -->
Conveying meaning to assistive technologies

Using color 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 color 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.

Small Alert Sizes

When the available space is small, you can drop off the associated icon, and the close button, to allow more room for the message to show.

Product Listing Page

Product image

Cool New XC21 Galaxy 1

Cat #: 50W34

Model/Part #: XC21-024-230

Product image

Cool New XC21 Galaxy 2

Cat #: 50W34

Model/Part #: XC21-024-230

Product image

Cool New XC21 Galaxy 3

Cat #: 50W34

Model/Part #: XC21-024-230

<div class="alert alert-warning mb-5" role="alert">
  <div>
    <p class="font-weight-bold mb-0">Product Alert</p>
    <p class="mb-0">This product is restricted to Cool People™ only!</p>
  </div>
</div><!-- end alert -->

JavaScript behavior

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">
  <i class="far fa-times"></i>
</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

Cirrus'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...
})