Alerts

Alerts gives you some quick styles for an element designed to give the user messages.

Alert Classes

alert

• alert-{TYP}

  • primary secondary success danger warning info light dark

• Alert Options

  • alert-heading alert-link

alert-dismissible fade show

btn-close

Try it

Alerts have a main container class that can run with a contextual color class to determine the alert's color. Sort of odd that it doesn't just use the background classes, but this is because the colors of the text and other components will be able to match the container this way. They should also have the role of alert to convey meaning for assistive devices.

There are a few extra classes you can use with alerts.

alert-heading - Gives you a style for a heading within the alert that matches the alert's color.

alert-link - A style for the link, matching the alert's color

alert-dismissible fade show - You can specify that users will be able to close the alerts and add some animation to do so. When the user closes the alert, they will no longer exist on the page.

btn-close If you make an alert dismissible, you can add a close button so the user can close the alert