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.

Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button. On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.

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.

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

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

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

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.

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.

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