Default alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alertmessages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warningor danger. Wrap any text and an optional dismiss button in .alertand one of the five contextual classes (e.g., .alert-success) for basic alert messages.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Bordered alerts
Examples of borderedalerts. Basically, any alert could have a colored border, except solid alerts. This stronger border adds more visual separation, it doesn't attract too much attention, but in the same time highlights a message importance using contextual border, background and text colors. To use stronger border, just add .alert-borderedto the base .alertclass.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Styled left alerts
Styled alerts with leftpositioned icons. These alerts have a wide leftborder and contextual icon, support all contextual alert classes. Also they support custom border color classes according to the custom color system. To use left positioned styled alerts, add .alert-styled-leftclass to the contextual alert class. To use custom border color and custom icon, use .border-*and .alert-styled-customclasses. To add left arrow, use .alert-arrow-leftclass.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Styled right alerts
Styled alerts with rightpositioned icons. These alerts have a wide rightborder and contextual icon, support all contextual alert classes. Also they support custom border color classes according to the custom color system. To use right positioned styled alerts, add .alert-styled-rightclass. To use custom border color and custom icon, use .border-*and .alert-styled-customclasses. To add right arrow, use .alert-arrow-rightclass.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Solid alerts
Examples of alerts with solidbackground color. This type of alerts are useful when you need to highlight some important information and attract more attention to it. To use solid alert styling, add contextual background color class to the base .alertcontainer. Also alerts support custom color classes from a custom color system. To use a custom color, add .bg-*to the base .alertclass.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Solid left styled
Examples of solid alerts with leftpositioned icon. Default solid alerts can be mixed with styled alerts in order to display contextual icon and darker leftborder. They perfectly suit for different kinds of notifications. To use, add alert-styled-leftand contextual .bg-*classes to the base .alertclass. To use custom alert color, just add .bg-*class from the custom color system.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Solid right styled
Examples of solid alerts with rightpositioned icon. Default solid alerts can be mixed with styled alerts in order to display contextual icon and darker rightborder. They perfectly suit for different kinds of notifications. To use, add alert-styled-rightand contextual .bg-classes to the base .alertclass. To use custom alert color, just add .bg-*class from the custom color system.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color
Rounded alerts
Examples of roundedalerts. By default, all alerts have 3pxborder radius. You can increase it by adding .alert-roundedclass to any type of alert: basic, bordered, styled with arrows and solid. This class also increases side padding and border widths in alerts for better appearance. The main benefit of rounded alerts - they don't look like any element on the page.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
Custom color