Colored alerts
You successfully read this important alert message.
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" role="alert">
You successfully read this important alert message.
</div>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Outline alerts
You successfully read this important alert message.
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 outline-alert" role="alert">
You successfully read this important alert message.
</div>
<div class="alert alert-success outline-alert" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info outline-alert" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning outline-alert" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger outline-alert" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Alerts with closing button
You successfully read this important alert message.
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-dismissible fade show" role="alert">
<button type="button" class="close" role="data-dismiss" aria-label="Close">
<i class="material-icons">clear</i>
</button>
You successfully read this important alert message.
</div>
...
Alerts with icons
You successfully read this important alert message.
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" role="alert">
<i class="icon icon-set-class"></i>
You successfully read this important alert message.
</div>
...