Alerts
Basic Alerts
Use one of the four required contextual classes.
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.
| Class Reference | Values |
|---|---|
class="alert alert-[value]"
|
success | info | warning | danger |
Outline Alerts
Use one of the four required contextual classes.
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.
| Class Reference | Values |
|---|---|
class="alert alert-outline-[value]"
|
success | info | warning | danger |
Solid Colored Alerts
Use one of the four required contextual classes.
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.
| Class Reference | Values |
|---|---|
class="alert alert-solid-[value]"
|
success | info | warning | danger |