<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>

<div class="alert alert-success" role="alert">
<strong>Well done!</strong>You successfully read <a href="#"class="alert-link"> this important alert message.</a>
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#"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="#"class="alert-link">not looking too good.</a>
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong><a href="#"class="alert-link">Change a few things up</a>and try submitting again.
</div>

<div class="alert alert-icon alert-success" role="alert">
<i class="fa fa-check-circle-o mr-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 mr-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 mr-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 mr-2" aria-hidden="true"></i> Oh snap!Change a few things up and try submitting again.
</div>

<div class="alert alert-avatar alert-primary alert-dismissible">
<span class="avatar" style="background-image: url(../assets/images/faces/female/14.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/faces/male/5.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>