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>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
Add .alert-icon class.
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>Alert with avatar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="alert alert-avatar alert-primary alert-dismissible">
<span class="avatar" style="background-image: url(../assets/images/users/female/4.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-avatar alert-success alert-dismissible">
<span class="avatar" style="background-image: url(../assets/images/users/male/5.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</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!
Alerts Popovers
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 yo self, you're not looking too good.
Danger Message
Change a few things up and try submitting again.