Alert

Give users feedback with these alerts. Use success for when actions are successfully completed. Use danger for warnings and when actions have failed.

Use secondary if you want to inform the user about something that is not related to an action. If you need to inform the user to something that is not related to an action you can also use primary if you need to grab their attention, but please refrain from doing so if full attention is not necessary.

Inline alerts

For use inline on the page with other content, use class="alert alert-THEME".

<div class="alert alert-success" role="alert">
    A simple success alert with <a href="#" class="alert-link">an example link</a>.
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>.
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert with <a href="#" class="alert-link">an example link</a>.
</div>
<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>.
</div>

A simple success alert with an example link.

A simple danger alert with an example link.

A simple secondary alert with an example link.

A simple primary alert with an example link.

Fixed / floating alerts

If you want the alert to be fixed, please add the class alert-floating. This adds position: fixed, aligns it to the top right corner and adds a shadow to the alert that gives it an impression that it floats over the other content. You can se an example in the top right corner of this page. Please make sure that a fixed/floating alert is dismissable in case it gets position above important content.

<div class="alert alert-dismissible alert-success alert-floating" role="alert">
    A simple floating alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
</div>

A simple floating alert with an example link.

Block alerts

Add the class alert-block if you want to have an alert as a full-width block. This is meant to be used under the menu. See examples below.

<div class="alert alert-dismissible alert-success alert-block" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
</div>

A simple block alert with an example link.

Dismissable alerts

If you are loading the required Javascript, it’s possible to dismiss any alert. Here’s how:

Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript or any other framework-specific library that enables the Bootstrap JS functions.
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 behavior across all devices.