# Alerts

Various notification styles

#### Toast

Toasts based notifications can be used to to show important alerts or information to users.

Primary Example

Info Example

Warning Example

Success Example

Danger Example

Close Button

Put some HTML in the text

Making them sticky

Fade/Slide animation

#### Alerts

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

Primary - A simple primary alert - check it out!
Secondary - A simple secondary alert - check it out!
Success - A simple success alert - check it out!
Danger - A simple danger alert - check it out!
Warning - A simple warning alert - check it out!
Info - A simple info alert - check it out!
Light - A simple light alert - check it out!
Dark - A simple dark alert - check it out!

#### Dismissible Alerts

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

Primary - A simple primary alert - check it out!
Secondary - A simple secondary alert - check it out!
Success - A simple success alert - check it out!
Danger - A simple danger alert - check it out!
Warning - A simple warning alert - check it out!
Info - A simple info alert - check it out!
Light - A simple light alert - check it out!
Dark - A simple dark alert - check it out!

#### Soft Alerts

Alternate styles for alerts with softer background color by replacing classes like `.alert-primary` with `.alert-soft-primary`. Alerts can also contain additional HTML elements like icons and paragraphs.

flag
Tip: Holding `Shift` and pressing `Enter` will create a new line in your message without posting it in channel. Learn more about formatting your messages.
edit
Note: If you have two-factor authentication turned on, you will need to enter the 6-digit authentication code we send to your phone.
error_outline
PRO and FREE versions are now available. Stack Admin is the easiest way to build or style your dashboard/application. Please visit our product page for more information.
adjust
Secondary - A simple secondary alert - check it out!.
error_outline
Danger - A simple danger alert - check it out!.
info_outline
Info - A simple info alert - check it out!.
info
Dark - A simple dark alert - check it out!.
access_time
Light - A simple light alert - check it out!.

#### Badges Regular

A small count and labeling component. Please read the official Bootstrap documentation for a full list of options.

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

#### Badges Soft

A variation of inversed badges color.

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