Default alerts

<divclass="alert alert-primary"role="alert">  Primary alert—At vero eos et accusamus praesentium!</div><divclass="alert alert-secondary"role="alert">  Secondary alert—At vero eos et accusamus praesentium!</div><divclass="alert alert-success"role="alert">  Success alert—At vero eos et accusamus praesentium!</div><divclass="alert alert-info"role="alert">  Info alert—At vero eos et accusamus praesentium!</div><divclass="alert alert-warning"role="alert">  Warning alert—At vero eos et accusamus praesentium!</div><divclass="alert alert-danger"role="alert">  Danger alert—At vero eos et accusamus praesentium!</div>

Links in alerts

<divclass="alert alert-success"role="alert"><strong>Well done!</strong>You successfully read <ahref="#"class="alert-link">this important alert message.</a></div><divclass="alert alert-info"role="alert"><strong>Heads up!</strong>This <ahref="#"class="alert-link">alert needs your attention,</a>but it's not super important.</div><divclass="alert alert-warning"role="alert"><strong>Warning!</strong>Better check yourself, you're<ahref="#"class="alert-link">not looking too good.</a></div><divclass="alert alert-danger"role="alert"><strong>Oh snap!</strong><ahref="#"class="alert-link">Change a few things up</a>and try submitting again.</div>

Alert with icon

Add .alert-iconclass.

<divclass="alert alert-icon alert-success"role="alert"><iclass="fa fa-check-circle-o mr-2"aria-hidden="true"></i>Well done! You successfully read this important alert message.</div><divclass="alert alert-icon alert-info"role="alert"><iclass="fa fa-bell-o mr-2"aria-hidden="true"></i>Heads up! This alert needs your attention, but it's not super important.</div><divclass="alert alert-icon alert-warning"role="alert"><iclass="fa fa-exclamation mr-2"aria-hidden="true"></i> Warning! Better check yourself, you're not looking too good.</div><divclass="alert alert-icon alert-danger"role="alert"><iclass="fa fa-frown-o mr-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.
<divclass="alert alert-avatar alert-primary alert-dismissible"><spanclass="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><divclass="alert alert-avatar alert-success alert-dismissible"><spanclass="avatar"style="background-image: url(assets/images/faces/male/5.jpg)"></span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

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.