Chapter 10. Alerts Bootstrap Component

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

10.1. Basic example

[Warning]

Alerts don’t have default classes, only base and modifier classes. A default gray alert doesn’t make too much sense, so you’re required to specify a type via contextual class. Choose from success, info, warning, or danger.

AsciiDoc Code. 

[alert,success]
.Well done!
--
You successfully read this important alert message.
--

Example 10.1. Alert with success contextual state class

You successfully read this important alert message.


AsciiDoc Code. 

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

Example 10.2. Alert with info contextual state class

This alert needs your attention, but it’s not super important.


AsciiDoc Code. 

[alert,warning]
.Warning!
--
Better check yourself, you're not looking too good.
--

Example 10.3. Alert with warning contextual state class

Better check yourself, you’re not looking too good.


AsciiDoc Code. 

[alert,danger]
.Oh snap!
--
Change a few things up and try submitting again.
--

Example 10.4. Alert with danger contextual state class

Change a few things up and try submitting again.


10.2. Dismissable alerts

Build on any alert by setting an optional dismiss option (close button).

AsciiDoc Code. 

[alert,warning,true]
.Warning!
--
Better check yourself, you're not looking too good.
--

Example 10.5. Alert with contextual state class

Better check yourself, you’re not looking too good.


10.3. Learn More