Loading. Please Wait.

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

##### Examples

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

examples

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.
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.

##### Dismissible Alerts

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

examples

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.
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.

##### With Simple Icon

examples

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.

##### With Alternative Icon

examples

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.

##### Alerts with Header & Buttons

examples

#### 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.

##### Alerts with Icons, Header & Buttons

examples

#### 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.

##### Alerts with Header & Buttons v2

examples

##### 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.

##### Alerts with Icons, Header & Buttons v2

examples

##### 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.

Navbar Options

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color