Alerts

Basic Alerts

Alerts are available for any length of text, as well as an optional dismiss button. Add .alert.alert-COLOR classes for alert with all theme colors.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert

Dismissible Alerts

Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert

Alerts with Links

Add .alert-link class to add links to alerts.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert

Alerts with No Border

Add .border-0 class along with .alert class for alerts with no borders.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert

Alerts with icons

To add left/right icons to the alert, use class .alert-icon-left or alert-icon-right with icon class .alert-icon.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Alerts with icons & Arrow

To add left/right icons with arrow to the alert, use class .alert-arrow-left or alert-arrow-right as required.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Solid Alerts

To use solid alert, add background color class to the .alert container class. Alerts also support custom color classes from theme color system. To use a custom color, add .bg-* to the .alert class.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Solid Alerts with icons

To use solid alert with icons, add class .alert-icon-left or alert-icon-right to .alert container class.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Solid Alerts with icons & arrow

To use solid alert with icons, add class .alert-arrow-left or alert-arrow-right with icon classes to .alert container class.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Round Alerts

To use round alert, add class .round to .alert container class.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Round Alerts with icons

To use round alert, add class .round to .alert container class. To use Icons, add class .alert-icon-left or alert-icon-right to .alert container class.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Round Alerts with icons & arrow

To use round alert, add class .round to .alert container class. To add left/right icons with arrow to the alert, use class .alert-arrow-left or alert-arrow-right with icon classes.

Primary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Custom Alert

Alerts with Additional Content

Alerts can also contain additional HTML elements like headings and paragraphs.

Primary Alert
No Border Success Alert
Solid Danger Alert
Warning Alert
No Border Info Alert
Solid Custom Alert