Default Alerts
Provide contextual feedback messages for typical user actions.
Morning! We're glad to see you again and wish you a nice day.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Surprise! This is a super-duper nice looking alert with dark color.
Light Alerts
Alerts with light background color, add .alert-light class to change the style.
Morning! We're glad to see you again and wish you a nice day.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Surprise! This is a super-duper nice looking alert with dark color.
Outline Alerts
Alerts with transparent background, add .alert-outline class to change the style.
Morning! We're glad to see you again and wish you a nice day.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Surprise! This is a super-duper nice looking alert with dark color.
With Icon
Use .alert-icon class and add any icon before the alert text.
Alt Alerts
Use .alert-alt class to get alerts with stronger left border, adds more visual separation.
Rounded Alerts
Use .alert-rounded class to get alerts with increased border radius, adds more visual separation.
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.
Heads up! This alert needs your attention, but it's not super important.
Styled Alerts
Styled alerts have a wide left border and contextual icon, use .alert-styled class to get alerts like this.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.
With Title
With Buttons
