Dismissing
Holy guacamole! You should check in on some of those fields
below.
Live example
Default alerts
Primary alert—At vero eos et
accusamus
praesentium!
Secondary alert—At vero eos et
accusamus
praesentium!
Success alert—At vero eos et
accusamus
praesentium!
Info alert—At vero eos et accusamus
praesentium!
Warning alert—At vero eos et
accusamus
praesentium!
Danger alert—At vero eos et
accusamus
praesentium!
<div class="alert alert-primary" role="alert">
Primary alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-secondary" role="alert">
Secondary alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-success" role="alert">
Success alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-info" role="alert">
Info alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-warning" role="alert">
Warning alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-danger" role="alert">
Danger alert—At vero eos et accusamus praesentium!
</div>Alerts With Icons
Default! This is a
warning alert—check it out that has an icon too!
Primary! This is a
warning alert—check it out that has an icon too!
Success! This is a
warning alert—check it out that has an icon too!
Info! This is a
warning
alert—check it out that has an icon too!
Warning! This is a
warning alert—check it out that has an icon too!
Danger! This is a
warning alert—check it out that has an icon too!
Alerts With Icons Dismissing
Default! This is a
default alert—check it out!
Primary! This is a
primary alert—check it out!
Success! This is a
success alert—check it out!
Warning! This is a
warning alert—check it out!
Info! This is a
info
alert—check it out!
Danger! This is a
danger alert—check it out!
Links in alerts
Well done! You
successfully read this important
alert
message.
Heads up! This alert needs your attention, but
it's not super important.
Warning! Better
check
yourself, you're not looking too
good.
Oh snap! Change a few things up and try
submitting
again.
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>You successfully read <a href="javascript:void(0)"class="alert-link"> this important alert message.</a>
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="javascript:void(0)"class="alert-link">alert needs your attention,</a> but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>Better check yourself, you're<a href="javascript:void(0)"class="alert-link">not looking too good.</a>
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong><a href="javascript:void(0)"class="alert-link">Change a few things up</a>and try submitting again.
</div>Alert with icon
Well
done!
You successfully read this important alert message.
Heads up! This alert needs your
attention,
but it's not super important.
Warning! Better check yourself, you're
not
looking too good.
Oh snap!Change a few things up and try
submitting again.
<div class="alert alert-icon alert-success" role="alert">
<i class="fa fa-check-circle-o me-2" aria-hidden="true"></i> Well done! You successfully read this important alert message.
</div>
<div class="alert alert-icon alert-info" role="alert">
<i class="fa fa-bell-o me-2" aria-hidden="true"></i> Heads up! This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-icon alert-warning" role="alert">
<i class="fa fa-exclamation me-2" aria-hidden="true"></i> Warning! Better check yourself, you're not looking too good.
</div>
<div class="alert alert-icon alert-danger" role="alert">
<i class="fa fa-frown-o me-2" aria-hidden="true"></i> Oh snap!Change a few things up and try submitting again.
</div>Alerts style
Success Message
You successfully read this important alert message.
Info Message
This alert needs your attention, but it's not super important.
Warning Message
Best check the yo self, you're not looking too good.
Danger Message
Change a few things up and try submitting again.