Heads up! This alert needs your attention, but it's not super important.
Heads up!This alert needs your attention, but it's not super important.
Alert Colors
.alert .alert-color
Bazinga! This is a multi-purpose alert that's useful anywhere!.
Well done! You successfully read this important alert messageg.
Heads up! This alert needs your attention, it's kinda important.
Warning! Best check yo self, you'renot looking too good.
Oh snap! You need to Change a few things up and try again.
Oh snap! You need to Change hings up and chive on.
Oh snap! You need to Change hings up and chive on.
Alert Color Variations
Shade variations available for all colors.
.alert .alert-primary .pastel .light .dark
The Pastel Shade! Style this way using the class
.pastel
The Light Shade! Style this way using the class
.light
The Default Shade! Does not require any additional classes.
The Dark Shade! Style this way using the class
.dark
.alert .alert-info .pastel .light .dark
The Pastel Shade! Style this way using the class
.pastel
The Light Shade! Style this way using the class
.light
The Default Shade! Does not require any additional classes.
The Dark Shade! Style this way using the class
.dark
Alert Neutrals
.alert .alert-light .alert-dark
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Alert Toggles
.alert .alert-micro
Alert Sizes
.alert .alert-micro
Oh snap! You need to Change hings up and chive on.
.alert .alert-sm
Oh snap! You need to Change hings up and chive on.
.alert - Default
Oh snap! You need to Change hings up and chive on.
Alert Borders
.alert-border-left
Oh snap! You need to Change hings up and chive on.
.alert-border-right
Oh snap! You need to Change hings up and chive on.
.alert-border-top
Oh snap! You need to Change hings up and chive on.
.alert-border-bottom
Oh snap! You need to Change hings up and chive on.
Alert Gradient
Default - .alert
Oh snap! You need to Change hings up and chive on.
.alert .alert-gradient
Oh snap! You need to Change hings up and chive on.
Alert Icon
Simply add any icon class before or after alert text.
Oh snap! You need to Change hings up and chive on.
Alert Combined Options
.alert-color .alert-micro .alert-border-left
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Heads up! This alert attention, but it's not super important.
Heads up! This alertattention, but it's not super important.
Heads up! This alert needs your attention
Heads up! This alert needs your attention
Heads up! This alert needs your attention
Block Style Alerts
Alerts can handle more than 1 line of text!