Default Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Link Color

Use the .alert-link utility class to quickly provide matching colored links within any alert.


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

Alert with Icon

You can use flexbox utilities and Icons to create alerts with icons

Outline Alerts

Add .alert-outline class with for Outline alerts.

Left Border Alerts

Add .alert-outline class with for Outline alerts.

Top Border Alerts

Left Border Alert example

Label Icon Arrow Alerts

Alert label arrow example

Alert Live Examples

Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

Alert Examples

Success, Error and Warning Alert Examples.

© Symox.
Crafted with by Themesbrand