Alerts

Alert components to add special emphasis to select content
Default Bootstrap Alerts
.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.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.close(type='button', data-dismiss='alert', aria-label='Close')
        span(aria-hidden='true') ×

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-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.close(type='button', data-dismiss='alert', aria-label='Close')
        span(aria-hidden='true') ×
    .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.close(type='button', data-dismiss='alert', aria-label='Close')
        span(aria-hidden='true') ×
    .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
.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:
.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:
.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.
Bootstrap Documentation Available

Alerts are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of alerts within your project, visit the official Bootstrap modal documentation page.

Visit Bootstrap Alerts Docs