Alerts

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

Design

Options

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.

Success .alert-success

Well done! You successfully read this important alert message.

Info .alert-info

Heads up! This alert needs your attention, but it's not super important.

Warning .alert-warning

Warning! Better check yourself, you're not looking too good.

Danger .alert-danger

Oh snap! Change a few things up and try submitting again.

					

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


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


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


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

Sizing

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

Success .alert-success.alert-sm

Well done! You successfully read this important alert message.

Info .alert-info.alert-sm

Heads up! This alert needs your attention, but it's not super important.

Warning .alert-warning.alert-sm

Warning! Better check yourself, you're not looking too good.

Danger .alert-danger.alert-sm

Oh snap! Change a few things up and try submitting again.

					

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


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


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


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

Dismissible alerts

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

Warning! Are you sure you want to do this?

You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this.

Warning! Better check yourself, you're not looking too good.

					

<div class="alert alert-warning alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">Close</button> 
   <h2>Warning! Are you sure you want to do this?</h2> 
   <p>You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this.</p> 
   <p>
      <button type="button" class="btn btn-primary">Take this action</button> 
      <button type="button" class="btn">Or do this</button> 
   </p> 
</div>


<div class="alert alert-warning alert-sm alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">Close</button> 
   <strong>Warning!</strong> Better check yourself, you're not looking too good. 
</div>