Alerts

Add Widget

Examples

Alerts are available for any length of text,as well as an optional dismiss button. For proper styling,use one of the four requiredcontextual classes(e.g.,.alert-success). For inline dismissal,use the alerts jQuery plugin.

A simple primary alert

A simple success alert

A simple info alert

A simple warning alert

A simple danger alert

Link Color

Use the .alert-linkutility class to quickly provide matching colored links within any alert.

A simple primary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

Dismissing

You can see this in action with a live demo:

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.

Additional Content

Alerts can also contain additional HTML elements like headings and paragraphs.

Success Alert

Well done!

Placed your Order successfully

Danger Alert

Something went wrong

Sorry!Product not available

Alerts

Examples

Link Color

Dismissing

Additional Content

Success Alert

Well done!

Danger Alert

Something went wrong

Settings

Choose Layouts

Your order is placed

James Lemire

Your item is shipped

Salena Layfield

James Raphael

Alerts

Examples

Link Color

Dismissing

Additional Content

Success Alert

Well done!

Danger Alert

Something went wrong

Settings

Choose Layouts