#### Components - Alerts

Statistics Invoices Schedule

##### Default alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible `alert` messages. Alerts don't have default classes, only base and modifier classes: choose from `primary`, `success`, `info`, `warning` or `danger`. Wrap any text and an optional dismiss button in `.alert` and one of the five contextual classes (e.g., `.alert-success`) for basic alert messages.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Styled left alerts

Styled alerts with `left` positioned icons. These alerts have a wide `left` border and contextual icon, support all contextual alert classes. Also they support custom border color classes according to the custom color system. To use left positioned styled alerts, add `.alert-styled-left` class to the contextual alert class. To use custom border color and custom icon, use `.border-*` and `.alert-styled-custom` classes. To add left arrow, use `.alert-arrow-left` class.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Styled right alerts

Styled alerts with `right` positioned icons. These alerts have a wide `right` border and contextual icon, support all contextual alert classes. Also they support custom border color classes according to the custom color system. To use right positioned styled alerts, add `.alert-styled-right` class. To use custom border color and custom icon, use `.border-*` and `.alert-styled-custom` classes. To add right arrow, use `.alert-arrow-right` class.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Solid alerts

Examples of alerts with `solid` background color. This type of alerts are useful when you need to highlight some important information and attract more attention to it. To use solid alert styling, add contextual background color class to the base `.alert` container. Also alerts support custom color classes from a custom color system. To use a custom color, add `.bg-*` to the base `.alert` class.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Solid left styled

Examples of solid alerts with `left` positioned icon. Default solid alerts can be mixed with styled alerts in order to display contextual icon and darker `left` border. They perfectly suit for different kinds of notifications. To use, add `alert-styled-left` and contextual `.bg-*` classes to the base `.alert` class. To use custom alert color, just add `.bg-*` class from the custom color system.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Solid right styled

Examples of solid alerts with `right` positioned icon. Default solid alerts can be mixed with styled alerts in order to display contextual icon and darker `right` border. They perfectly suit for different kinds of notifications. To use, add `alert-styled-right` and contextual `.bg-` classes to the base `.alert` class. To use custom alert color, just add `.bg-*` class from the custom color system.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Rounded alerts

Examples of `rounded` alerts. By default, all alerts have `3px` border radius. You can increase it by adding `.alert-rounded` class to any type of alert: basic, bordered, styled with arrows and solid. This class also increases side padding and border widths in alerts for better appearance. The main benefit of rounded alerts - they don't look like any element on the page.

Primary alert

Morning! We're glad to see you again and wish you a nice day.

Danger alert

Oh snap! Change a few things up and try submitting again.

Success alert

Well done! You successfully read this important alert message.

Warning alert

Warning! Better check yourself, you're not looking too good.

Info alert

Heads up! This alert needs your attention, but it's not super important.

Custom color

Surprise! This is a super-duper nice looking alert with custom color.

##### Toast component

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

Basic toast

Hello, world! This is a toast message.

Toast title

Toast title
Hello, world! This is a toast message.

Dismissable toast

Dismissable toast
Hello, world! This is a toast message.

Text helper

Toast title 40 mins ago
Hello, world! This is a toast message.

Badge helper

Toast title 59
Hello, world! This is a toast message.

Loading helper

Toast title
Hello, world! This is a toast message.

Light toast

Toast title 11 mins ago
Hello, world! This is a toast message.

Custom toast color

Toast title 11 mins ago
Hello, world! This is a toast message.

Custom header color

Toast title 11 mins ago
Hello, world! This is a toast message.