Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts don't have default classes, only base and modifier classes: choose from primary, success, info, warning or danger. Wrap any text and an optional dismiss button in .alert and one of the five contextual classes (e.g., .alert-success) for basic alert messages.

All alerts have border by default and depending on use case and/or alert location, border can be removed or made stronger for a stronger appearance. Use border color helper classes to change border color if necessary. Use .alert-dismissible to add a close button functionality and .alert-link utility class to quickly provide matching colored links within any alert.

Alerts with left aligned block and inline icons. Block icon is a separate element that requires background color and text color utility classes, along with .alert-icon class that adds necessary styling. Alert container requires .alert-icon-[left|right] class depending on icon alignment. Inline icon inherits color from contextual alert class and doesn't require any additions.

Alerts with right aligned block and inline icons. Block icon is a separate element that requires background color and text color utility classes, along with .alert-icon class that adds necessary styling. Alert container requires .alert-icon-[left|right] class depending on icon alignment. Inline icon inherits color from contextual alert class and doesn't require any additions.

Examples of alerts with solid background color. This type of alerts are useful when you need to highlight some important information and bring more attention to it. To use solid alert styling, add contextual background color class to the base .alert container. Also alerts support custom color classes from a custom color system. To use a custom color, add .bg-* and .text-* classes to the base .alert class.

Solid alerts with left aligned block and inline icons. Solid alerts can also display contextual icon: block icon gets a semi-transparent black background color to make it more prominent, inline icon inherits all styles from alert container. Solid alerts perfectly suit for different kinds of notifications. To use solid alerts, simply add .bg-* and .text-* colors to .alert container.

Examples of solid alerts with left positioned icon. .

Solid alerts with right aligned block and inline icons. Solid alerts can also display contextual icon: block icon gets a semi-transparent black background color to make it more prominent, inline icon inherits all styles from alert container. Solid alerts perfectly suit for different kinds of notifications. To use solid alerts, simply add .bg-* and .text-* colors to .alert container.

Examples of rounded alerts. By default, all alerts have 4px border radius. You can use our .rounded-* modifier classes to change the default look or override --alert-border-radius variable to apply your border radius to all alerts globally. It is recommended to add .text-truncate to alert container to make sure that alert message doesn't wrap and text is properly truncated.

Apart from contextual colors, color system also contains 7 additional colors that can be used in context or out of it. Available colors are: dark, light, pink, purple, indigo, teal and yellow. To use, just add .alert-[color] class to .alert container. Additionally use .border-* and .text-* to adjust border and text color in light and dark alerts.