Alerts
Provide contextual feedback messages for typical user actions with responsive alert boxes using theme colors and smooth close/dismiss behaviors.
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Success! This is a success alert—check it out!
Warning! This is a warning alert—check it out!
Danger! This is a danger alert—check it out!
Info! This is an info alert—check it out!
Dismissible Alerts
You can make any alert dismissible simply by adding the .dismissible class. The framework will automatically inject the close dismiss button for you.
Well done! You successfully read this important alert message.
Holy guacamole! You should check in on some of those fields below.
<!-- Contextual Alerts -->
<div class="alert primary">
<strong>Primary!</strong> This is a primary alert.
</div>
<div class="alert secondary">
<strong>Secondary!</strong> This is a secondary alert.
</div>
<div class="alert success">
<strong>Success!</strong> This is a success alert.
</div>
<div class="alert warning">
<strong>Warning!</strong> This is a warning alert.
</div>
<div class="alert danger">
<strong>Danger!</strong> This is a danger alert.
</div>
<div class="alert info">
<strong>Info!</strong> This is an info alert.
</div>
<!-- Dismissible Alert -->
<div class="alert success dismissible">
<strong>Well done!</strong> You successfully read this alert.
</div>