Alerts
Alert components to add special emphasis to select content
Default Bootstrap Alerts
A primary alert—check it out!
A secondary alert—check it out!
A success alert—check it out!
A danger alert—check it out!
A warning alert—check it out!
A info alert—check it out!
A light alert—check it out!
A dark alert—check it out!
PUG
.alert.alert-primary(role='alert')
| A primary alert—check it out!
.alert.alert-secondary(role='alert')
| A secondary alert—check it out!
.alert.alert-success(role='alert')
| A success alert—check it out!
.alert.alert-danger(role='alert')
| A danger alert—check it out!
.alert.alert-warning(role='alert')
| A warning alert—check it out!
.alert.alert-info(role='alert')
| A info alert—check it out!
.alert.alert-light(role='alert')
| A light alert—check it out!
.alert.alert-dark(role='alert')
| A dark alert—check it out!Bootstrap's default state-specific alert styles have been styled to fit the SB Admin Pro theme.
Alert Content Styling
Alert Heading
This alert example has an alert heading, an alert link, and is dismissible! Example alert link!.alert.alert-primary.alert-dismissible.fade.show(role='alert')
h5.alert-heading Alert Heading
| This alert example has an alert heading, an alert link, and is dismissible!
a.alert-link(href='#!') Example alert link!
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
By default, Bootstrap styles the content within alerts. Use
.alert-heading
to style a heading within an alert,
.alert-link
to style a link within an alert, or you can use the dismissible option by using the
data-bs-dismiss='alert'
data attribute.
Learn more about dismissing Bootstrap alerts in the Bootstrap alerts component documentation .
Custom Icon Alerts
.alert.alert-primary.alert-icon(role='alert')
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
.alert-icon-aside
i.far.fa-flag
.alert-icon-content
h6.alert-heading Primary Icon Alert
| This alert uses an icon from Font Awesome!
.alert.alert-secondary.alert-icon(role='alert')
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
.alert-icon-aside
i(data-feather='feather')
.alert-icon-content
h6.alert-heading Danger Icon Alert
| This alert uses an icon from Feather Icons!The custom icon alert option allows you to use icons within alerts for additional context. Use icons from either Font Awesome or Feather Icons!
Custom Solid Alerts
This is a solid, primary alert!
This is a solid, secondary alert!
This is a solid, success alert!
This is a solid, danger alert!
This is a solid, warning alert!
This is a solid, info alert!
This is a solid, light alert!
This is a solid, dark alert!
.alert.alert-primary.alert-solid(role='alert')
| This is a solid, primary alert!
.alert.alert-secondary.alert-solid(role='alert')
| This is a solid, secondary alert!
.alert.alert-success.alert-solid(role='alert')
| This is a solid, success alert!
.alert.alert-danger.alert-solid(role='alert')
| This is a solid, danger alert!
.alert.alert-warning.alert-solid(role='alert')
| This is a solid, warning alert!
.alert.alert-info.alert-solid(role='alert')
| This is a solid, info alert!
.alert.alert-light.alert-solid(role='alert')
| This is a solid, light alert!
.alert.alert-dark.alert-solid(role='alert')
| This is a solid, dark alert!
Append the
.alert-solid
class to any alert to get a custom solid state color instead of the default low contrast color. Any of the other alert content options, including custom icon alerts, are supported with the solid alert styles.
Extended Alert Colors
Custom Colors with Default Alerts:
This is a red alert.
This is a orange alert.
This is a yellow alert.
This is a green alert.
This is a teal alert.
This is a cyan alert.
This is a blue alert.
This is a indigo alert.
This is a purple alert.
This is a pink alert.
.alert.alert-red(role='alert') This is a red alert.
.alert.alert-orange(role='alert') This is a orange alert.
.alert.alert-yellow(role='alert') This is a yellow alert.
.alert.alert-green(role='alert') This is a green alert.
.alert.alert-teal(role='alert') This is a teal alert.
.alert.alert-cyan(role='alert') This is a cyan alert.
.alert.alert-blue(role='alert') This is a blue alert.
.alert.alert-indigo(role='alert') This is a indigo alert.
.alert.alert-purple(role='alert') This is a purple alert.
.alert.alert-pink(role='alert') This is a pink alert.
SB Admin Pro's expanded color system allows you to use the non-contextual colors in the same way as Bootstrap's colors.
Custom Colors with Solid Alerts:
This is a red alert.
This is a orange alert.
This is a yellow alert.
This is a green alert.
This is a teal alert.
This is a cyan alert.
This is a blue alert.
This is a indigo alert.
This is a purple alert.
This is a pink alert.
.alert.alert-red.alert-solid(role='alert') This is a red alert.
.alert.alert-orange.alert-solid(role='alert') This is a orange alert.
.alert.alert-yellow.alert-solid(role='alert') This is a yellow alert.
.alert.alert-green.alert-solid(role='alert') This is a green alert.
.alert.alert-teal.alert-solid(role='alert') This is a teal alert.
.alert.alert-cyan.alert-solid(role='alert') This is a cyan alert.
.alert.alert-blue.alert-solid(role='alert') This is a blue alert.
.alert.alert-indigo.alert-solid(role='alert') This is a indigo alert.
.alert.alert-purple.alert-solid(role='alert') This is a purple alert.
.alert.alert-pink.alert-solid(role='alert') This is a pink alert.
Use the
.alert-solid
class to utilize custom solid alert colors with the expanded color system.