An alert is a short and attention-grabbing message providing feedback about some important aspect of the service which may need to be handled by the user. Read more about alerts in the UX Guidelines.

Wrap any text and an optional dismiss button in .alert for basic alert messages.

Use when

  • You need the user to pay attention to something unexpected
  • User should likely change his course of action because of the alert
  • The message may stay on screen until handled



There are 4 options for alerts and to apply them to you alert message simply add one of the following classes: .alert-success, .alert-info, .alert-warning or .alert-danger.


Fancy small alerts? Add .alert-sm for the small version.

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

<!-- Alerts - .alert -->
<div class="alert alert-success" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.

<div class="alert alert-info" role="alert">
   <strong>Heads up!</strong> This alert needs your attention, but it's not super important.

<div class="alert alert-warning" role="alert">
   <strong>Warning!</strong> Better check yourself, you're not looking too good.

<div class="alert alert-danger" role="alert">
   <strong>Oh snap!</strong> Change a few things up and try submitting again.

<!-- Small alerts - .alert.alert-sm -->
<div class="alert alert-sm alert-success" role="alert">

<!-- Dismissible alerts - .alert.alert-dismissible -->
<div class="alert alert-success alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>