Alert offers different levels of severity that requires immediate attention of the end users such as warning, error or confirmation messages, which are determined by a distinctive color. Use one of the the contextual classes below for a different look.
Apply the appropriate class to the links inside any alert boxes to quickly create matching colored links.
Include a descriptive icon to complement the message inside the alert component with the following example.
Within the alert, you can also place additional elements such as headers, paragraphs, and dividers to be more elaborate and convey more content.
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.
To skip alerts that the user has already read, we can add an optional close button so the user can easily dismiss it.