include alert
Alerts are messages to users when something is wrong. For example, if a user types in an incorrect email address or
credit card number, they’ll receive an error alert message, prompting them to make corrections.
.alert-primary
You can create colorful alerts for any texts. Primary alert (more important message) is in light blue color.
<div class=”alert alert-primary” role=”alert”>Primary alert</div>
.alert-secondary
Add a secondary alert (less important message) in light gray color.
<div class=”alert alert-secondary” role=”alert”>I’m a secondary alert</div>
.alert-success
This will alert a user that their action has been successful
<div class=”alert alert-success” role=”alert”>Success alert!</div>
.alert-warning
This will send a message of an upcoming action.
<div class=”alert alert-warning” role=”alert”>Warning! Warning!</div>
.alert-danger
A danger alert is similar to a warning alert, but for more negative actions (e.g., getting locked out after too many password
fails)
<div class=”alert alert-danger” role=”alert”> You are in grave danger, my friend!</
div>
.alert-link
So you want to add another message and a link to that message in the original alert? You can embed that message and
in the same color.
<div class=”alert alert-success”> <strong>Success!</strong> You should <a href=”#”
class=”alert-link”>read this cool message</a>. </div>
.alert-dismissible
Provides an option to close the alert after reading it.
<div class=”alert alert-success alert-dismissible”> <a href=”#” class=”close” datadismiss=”alert” aria-label=”close”>×</a><strong>Success! You did well</strong>
</div>
.alert-heading
Add a quick header to your alert. (e.g., “shipping address” or “billing address”). It could relate to an entire page or just a
piece of content within that page.
<div class=”alert alert-info”>
<h4 class=”alert-heading”><i class=”fa fa-info”></i>
.alert-light and .alert-dark
Changes the alert style to an in either a light or dark gray color.
<div class=”alert alert-light” role=”alert”> I’m the light alert </div>
<div class=”alert alert-dark” role=”alert”>And I’m the dark (side) alert!</div>