Default Alerts
Alerts are available for any length of text. Add .alert-{color} along with .alert for alert with all theme colors.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Info Alert
Warning Alert
Light Alert
Dark Alert
Dismissible Alerts
Add .alert-dismissible to dismiss the alert and use .close button which has extra padding to the right of the button.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Info Alert
Warning Alert
Light Alert
Dark Alert
Alerts with Links
Set .bg-light-{color} for light background color. Add .alert-link to add links to alerts.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Info Alert
Warning Alert
Light Alert
Dark Alert
Alerts with icons
To add left ro right icons to the alert, use .alert-icon-left or .alert-icon-right respectively.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Info Alert
Warning Alert
Light Alert
Dark Alert
Alerts with Additional Content
Alerts can also contain additional HTML elements like headings and paragraphs.
Default Primary Alert
Good Morning!
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.
Light Primary Alert
Good Morning!
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.
