Alerts

Basic

Oh snap! Change a few things up and try submitting again.

<div class="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Different colors

You can use colors from list css-colors.html.

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.

<div class="alert green lighten-4 green-text text-darken-2">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert blue lighten-2 white-text">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert orange lighten-2 white-text">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Dismissible

Build on any alert by adding an optional .alert-dismissible and close button.

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-dismissible orange lighten-4 orange-text text-darken-2">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
  <button class="close">&times;</button>
</div>

Bordered

Oh snap! Change a few things up and try submitting again.

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.

<div class="alert alert-border-left">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert green lighten-4 green-text text-darken-2 alert-border-right">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert blue lighten-4 blue-text text-darken-2 alert-border-top">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert orange lighten-4 orange-text text-darken-2 alert-border-bottom">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Not Only Messages

Warning!

Better check yourself, you're not looking too good.

Okay

Warning!

Better check yourself, you're not looking too good.

Okay Cancel

<div class="alert orange lighten-4 orange-text text-darken-2">
  <h4>Warning!</h4>
  <p>Better check yourself, you're not looking too good.</p>
  <p><a class="btn waves-effect orange z-depth-0" href="#!">Okay</a></p>
</div>
<div class="alert alert-border-bottom cyan lighten-4 cyan-text text-darken-2">
  <h4>Warning!</h4>
  <p>Better check yourself, you're not looking too good.</p>
  <p>
    <a class="btn waves-effect cyan z-depth-0" href="#!">Okay</a>
    <a class="btn waves-effect white cyan-text text-darken-2 z-depth-0" href="#!">Cancel</a>
  </p>
</div>