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

Info .alert-info

Warning .alert-warning

Danger .alert-danger

					


<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

Info .alert-info.alert-sm

Warning .alert-warning.alert-sm

Danger .alert-danger.alert-sm

					


<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>

Medium icons

For a medium icon size add .alert-icon-md to the alert main wrapper.

Success .alert-success.alert-icon-md

Info .alert-info.alert-icon-md

Warning .alert-warning.alert-icon-md

Danger .alert-danger.alert-icon-md

					


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




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




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




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

Large icons

For a large icon size add .alert-icon-lg to the alert main wrapper.

Success .alert-success.alert-icon-lg

Info .alert-info.alert-icon-lg

Warning .alert-warning.alert-icon-lg

Danger .alert-danger.alert-icon-lg

					


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




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




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




<div class="alert alert-icon-lg alert-danger" 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.

					


<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>