Default Alerts
Use .alert-{state} for default alert states
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.
Oh snap! Change a few things up and try submitting again.
Outline Alerts
Use .alert-outline for default alert states
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.
Oh snap! Change a few things up and try submitting again.
Default with Icon Alerts
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.
Oh snap! Change a few things up and try submitting again.
Outline with Icon Alerts
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.
Oh snap! Change a few things up and try submitting again.
Solid Alerts
Use .alert-solid for default alert states
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.
Oh snap! Change a few things up and try submitting again.