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.
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.
Build on any alert by adding an optional .alert-dismissible and close button.
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>