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.

Dismissible Alerts

Add a button and the .alert-dismissibleclass,which adds extra padding to the right of the alert and positions the .closebutton.

Soft Alerts

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

Badges

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

PrimarySecondarySuccessDangerWarningInfoLightDark

PrimarySecondarySuccessDangerWarningInfoLightDark

Badges Soft

A variation of inversed badges color.

PrimarySecondarySuccessDangerWarningInfoLightDark

PrimarySecondarySuccessDangerWarningInfoLightDark