Alerts

Alerts Examples

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alert Primary .alert-primary

Alert Secondary .alert-secondary

Alert Success .alert-success

Alert Danger .alert-danger

Link color

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

Alert Success .alert-link

Alert Danger .alert-link

Alert Warning .alert-link

Alert Info .alert-link

Icon Examples

Alerts are available for any length of text with icon, as well as an optional dismiss button.

Alert Success .alert-success

Alert Info .alert-info

Alert Warning .alert-warning

Alert Danger .alert-danger

Dismissing

You can see this in action with a live demo:

Alert Primary .alert-dismissible

Alert Info .alert-dismissible

Alert success .alert-dismissible

Alert Light .alert-dismissible

Alerts Color Examples

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alert Primary .alert-primary .bg-primary .border-0

Alert Secondary .alert-secondary .bg-secondary .border-0

Alert Success .alert-success .bg-success .border-0

Alert Danger .alert-danger .bg-danger .border-0

Alert pink .alert-pink .bg-pink .border-0

Alert purple .alert-purple .bg-purple .border-0

Alert dark .alert-dark .bg-dark .text-light .border-0

Alert light .alert-light .bg-light .border-0

Additional content

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

© Amezia.
Crafted with by Themesbrand