Alerts

Alert components to add special emphasis to select content
Default Bootstrap Alerts
<div class="alert alert-primary" role="alert">
    A primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
    A secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    A success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
    A danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
    A warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
    A info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
    A light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
    A dark alert—check it out!
</div>
.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
<div class="alert alert-primary alert-dismissible fade show" role="alert">
    <h5 class="alert-heading">Alert Heading</h5>
    This alert example has an alert heading, an alert link, and is dismissible! <a class="alert-link" href="#!">Example alert link!</a>
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
.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
<div class="alert alert-primary alert-icon" role="alert">
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="alert-icon-aside">
        <i class="far fa-flag"></i>
    </div>
    <div class="alert-icon-content">
        <h6 class="alert-heading">Primary Icon Alert</h6>
        This alert uses an icon from Font Awesome!
    </div>
</div>
<div class="alert alert-secondary alert-icon" role="alert">
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="alert-icon-aside">
        <i data-feather="feather"></i>
    </div>
    <div class="alert-icon-content">
        <h6 class="alert-heading">Danger Icon Alert</h6>
        This alert uses an icon from Feather Icons!
    </div>
</div>
.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
<div class="alert alert-primary alert-solid" role="alert">This is a solid, primary alert!</div>
<div class="alert alert-secondary alert-solid" role="alert">This is a solid, secondary alert!</div>
<div class="alert alert-success alert-solid" role="alert">This is a solid, success alert!</div>
<div class="alert alert-danger alert-solid" role="alert">This is a solid, danger alert!</div>
<div class="alert alert-warning alert-solid" role="alert">This is a solid, warning alert!</div>
<div class="alert alert-info alert-solid" role="alert">This is a solid, info alert!</div>
<div class="alert alert-light alert-solid" role="alert">This is a solid, light alert!</div>
<div class="alert alert-dark alert-solid" role="alert">This is a solid, dark alert!</div>
.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:
<div class="alert alert-red" role="alert">This is a red alert.</div>
<div class="alert alert-orange" role="alert">This is a orange alert.</div>
<div class="alert alert-yellow" role="alert">This is a yellow alert.</div>
<div class="alert alert-green" role="alert">This is a green alert.</div>
<div class="alert alert-teal" role="alert">This is a teal alert.</div>
<div class="alert alert-cyan" role="alert">This is a cyan alert.</div>
<div class="alert alert-blue" role="alert">This is a blue alert.</div>
<div class="alert alert-indigo" role="alert">This is a indigo alert.</div>
<div class="alert alert-purple" role="alert">This is a purple alert.</div>
<div class="alert alert-pink" role="alert">This is a pink alert.</div>
.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:
<div class="alert alert-red alert-solid" role="alert">This is a red alert.</div>
<div class="alert alert-orange alert-solid" role="alert">This is a orange alert.</div>
<div class="alert alert-yellow alert-solid" role="alert">This is a yellow alert.</div>
<div class="alert alert-green alert-solid" role="alert">This is a green alert.</div>
<div class="alert alert-teal alert-solid" role="alert">This is a teal alert.</div>
<div class="alert alert-cyan alert-solid" role="alert">This is a cyan alert.</div>
<div class="alert alert-blue alert-solid" role="alert">This is a blue alert.</div>
<div class="alert alert-indigo alert-solid" role="alert">This is a indigo alert.</div>
<div class="alert alert-purple alert-solid" role="alert">This is a purple alert.</div>
<div class="alert alert-pink alert-solid" role="alert">This is a pink alert.</div>
.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
Theme Customizer
Try a pre-built swatch!
Or choose your own colors...
Need ideas? Randomize!
Finished? Export your color palette file with install instructions!
Note: This customizer web component is an online-only tool and is not part of the download package when purchasing the theme.