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
Secondary color
Danger alert
Success alert
Warning alert
Info alert
Bordered alerts
Examples of bordered
alerts. Basically, any alert could have a colored border, except solid alerts. This stronger border adds more visual separation, it doesn't attract too much attention, but in the same time highlights a message importance using contextual border, background and text colors. To use stronger border, just add .alert-bordered
to the base .alert
class.
Primary alert
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
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
Danger alert
Success alert
Warning alert
Info alert
Custom color
Custom colors
Apart from contextual colors, color system also contains 6 additional colors that can be used in context or out of it. Available colors are: dark
, pink
, purple
, indigo
, teal
and yellow
. To use, just add .alert-[color]
class to .alert
container. For dark solid colors, use .bg-[color]
and .text-white
classes instead.
Dark alert
Pink color
Purple alert
Indigo alert
Teal alert
Yellow alert
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
Toast title
Dismissable toast
Text helper
Badge helper
Loading helper
Light toast
Custom toast color
Custom header color