Alerts
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.
Links in 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.
Alert Style 1
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
You successfully read this important alert message.
This alert needs your attention, but not super important.
Best check yo self, you're not looking too good.
Change a few things up and try submitting again.
Alert Style 2
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
