Alerts

Digital pattern library

The alert pattern is used to provide contextual feedback messages for typical user actions and convey important information for users.

Wrap any text in .alert and one of the four contextual classes (e.g. .alert-success) for an alert message.
Use the .alert-link class to quickly provide matching coloured links within any alert.

Use the class .alert-success for a success alert box.

Well done! You successfully read this important alert message.

Code




    Well done! You successfully read this important alert message.

Use the class .alert-info for an info alert box.

Heads up! This alert needs your attention, but it's not super important.

Code




    Heads up! This alert needs your attention, but it's not super important.

Use the class .alert-warning for a warning alert box.

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

Code




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

Use the class .alert-danger for a danger alert box.

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

Code




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