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.
Sizing
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.
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.
<!-- Alerts - .alert -->
<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>
<!-- Small alerts - .alert.alert-sm -->
<div class="alert alert-sm alert-success" role="alert">
...
</div>
<!-- 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>
...
</div>