Basic Alerts
Use one of the four required contextual classes.
Outline Alerts
Use one of the four required contextual classes.
Solid Colored Alerts
Use one of the four required contextual classes.
Link color Alerts
Use the .alert-link utility class to quickly
provide matching colored links within any alert.
Additional Content Alert
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing Alerts
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
Alert With Icon
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Alert With Icon Dismissing
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Alerts Styles
You successfully read this important alert message.
This alert needs your attention, but it's not super important.
Best check yo self, you're not looking too good
Change a few things up and try submitting again.
Warning
Warning
Are you sure you want to delete 20 items
Alert
Alert
Are you sure you want to end current services
Success
Success
Sent successfully
Processing
Processing
Your process currently in progress
