loader

Notification

Default Alert

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success ). For background color use class .bg-* , .text-white

Primary - A simple primary alert

Dismissing 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.

Outline Alerts

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

Light Alerts

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

Outline Rounded Alerts

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

Light Rounded Alerts

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

Notify Alerts

Alerts Links

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

Additional content

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

Settings

Theme
Theme Direction
Theme Colors
Layout Type
Container Option
Sidebar Type
Card With