Alerts

  1. Home
  2. Components
  3. Alerts

Alert States

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-COLOR) for basic colored alert messages.

Primary! Better check yourself, you're not looking too good. Secondary! Better check yourself, you're not looking too good. Success! Better check yourself, you're not looking too good. Danger! Better check yourself, you're not looking too good. Info! Better check yourself, you're not looking too good. Warning! Better check yourself, you're not looking too good. Light! Better check yourself, you're not looking too good. Dark! Better check yourself, you're not looking too good.

Closable Alert

{{ alert.message }}

Self-Closing Alert

Static self-closing alert that disappears after 20 seconds (refresh the page if it has already disappeared)

Check out our awesome new features!

Show a self-closing success message that disappears after 5 seconds.

{{ successMessage }}

Custom Alert

Whoa! This is a custom alert.