Alerts

Default Alerts

Use the alert class to show a default alert.

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

Borderless Alerts

Use the alert-borderless class to set alert without border.

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

Dismissing Alerts

Use the alert-dismissible class to add dismissing button to the alert.

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

Link Color Alerts

Use the alert-link class at <a> tag to show matching colored links within the given alert.

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

Live Alert Example

Click the Show live alert button to show an alert on button click.

Outline Alerts

Use the alert-outline class to set an alert with outline.

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

Left Border Alerts

Use the alert-border-left class to set an alert with the left border & outline.

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

Modern Alerts

Use the alert-modern class to set an alert modern.

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

Label Icon Alerts

Use the alert-label-icon class to set an alert with a label icon.

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

Additional Content Alerts

Use the alert-additional class and Use the alert- class to HTML elements like headings, paragraphs, dividers etc.

Primary Alert
Danger Alert
Success Alert
Warning Alert

Top Border with Outline Alerts

Use the alert-top-border class to set an alert with the top border and outline.

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

Label Icon Arrow Alerts

Use the alert-label-icon label-arrow class to show an alert with label icon and arrow.

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

Rounded Label Icon Alerts

Use the alert-label-icon rounded-label class to set an alert with a rounded label icon.

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

Solid Alerts

Use the alert-solid class to set an alert with solid style.

Primary Solid Alert
Secondary Solid Alert
Success Solid Alert
Danger Solid Alert
Warning Solid Alert
Info Solid Alert
Light Solid Alert
Dark Solid Alert
© Invoika.
Design & Develop by Themesbrand