Alerts are available for any length of text, as well as an optional dismiss button. Add .alert.alert-COLOR classes for alert with all theme colors.
Primary Alert
Good Morning! Start your day with some alerts.
Success Alert
Well done! You successfully read this important alert message.
Danger Alert
Oh snap! Change a few things up and try submitting again.
Warning Alert
Warning! Better check yourself, you're not looking too good.
Info Alert
Heads up! This alert needs your attention, but it's not super important.
Custom Alert
Great! You are using some gorgeous custom colors.
Add .no-border class along with .alert class for alerts with no borders.
Primary Alert
Good Morning! Start your day with some alerts.
Success Alert
Well done! You successfully read this important alert message.
Danger Alert
Oh snap! Change a few things up and try submitting again.
Warning Alert
Warning! Better check yourself, you're not looking too good.
Info Alert
Heads up! This alert needs your attention, but it's not super important.
Custom Alert
Great! You are using some gorgeous custom colors.
Add .alert-link class to add links to alerts.
Primary Alert
Good Morning! Start your day with some alerts.
Success Alert
Well done! You successfully read this important alert message.
Danger Alert
Oh snap! Change a few things up and try submitting again.
Warning Alert
Warning! Better check yourself, you're not looking too good.
Info Alert
Heads up! This alert needs your attention, but it's not super important.
Custom Alert
Great! You are using some gorgeous custom colors.
Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button. On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
Primary Alert
Good Morning! Start your day with some alerts.
Success Alert
Well done! You successfully read this important alert message.
Danger Alert
Oh snap! Change a few things up and try submitting again.
Warning Alert
Warning! Better check yourself, you're not looking too good.
Info Alert
Heads up! This alert needs your attention, but it's not super important.
Custom Alert
Great! You are using some gorgeous custom colors.