Alerts
1.
Alerts Default
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warning or danger. Wrap any text and an optional dismiss button in .alert and one of the five contextual classes (e.g., .alert-success) for basic alert messages.
Alert: Primary #1.01
Morning!
We're glad to see you again and wish you a nice day.Alert: Danger #1.02
Oh Snap!
Change a few things up and try submitting again.Alert: Info #1.03
Heads Up!
This alert needs your attention, but it's not super important.Alert: Warning #1.04
Warning!
Better check yourself, you're not looking too good.Alert: Success #1.05
Well Done!
You successfully read this important alert message.Alert: Dark #1.06
Attention!
This alert needs your attention, but it's not important.2.
Alerts Dismissing
Sing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
Dismissing: Primary #2.01
Morning!
We're glad to see you again and wish you a nice day.Dismissing: Danger #2.02
Oh Snap!
Change a few things up and try submitting again.Dismissing: Info #2.03
Heads Up!
This alert needs your attention, but it's not super important.Dismissing: Warning #2.04
Warning!
Better check yourself, you're not looking too good.Dismissing: Success #2.05
Well Done!
You successfully read this important alert message.Dismissing: Dark #2.06
Attention!
This alert needs your attention, but it's not important.3.
Alerts Icon Small
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warning or danger. Wrap any text and an optional dismiss button in .alert and one of the five contextual classes (e.g., .alert-success) for basic alert messages.
Icon Small: Primary #3.01
Icon Small: Danger #3.02
Icon Small: Info #3.03
Icon Small: Warning #3.04
Icon Small: Success #3.05
Icon Small: Dark #3.06
4.
Alerts Icon Big
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warning or danger. Wrap any text and an optional dismiss button in .alert and one of the five contextual classes (e.g., .alert-success) for basic alert messages.
Icon Big: Primary #4.01
Welcome!
We're glad to see you again and wish you a nice day.Icon Big: Danger #4.02
Danger!
Change a few things up and try submitting.Icon Big: Info #4.03
Information!
This alert needs your attention, but it's not important.Icon Big: Warning #4.04
Warning!
Better check yourself, you're not looking too good.Icon Big: Success #4.05
Success!
You successfully read this important alert message.Icon Big: Dark #4.06
Attention!
This alert needs your attention, but it's not important.5.
Alerts Big
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warning or danger. Wrap any text and an optional dismiss button in .alert and one of the five contextual classes (e.g., .alert-success) for basic alert messages.