Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Basic Alerts

Alerts are available for any length of text.

<div class="alert alert-primary" role="alert">
  This is a primary alert — check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert — check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert — check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert — check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert — check it out!
</div>
<div class="alert alert-info" role="alert">
  This is an info alert — check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert — check it out!
</div>
Class Value
class="alert alert-{value}" primary | secondary | success | danger | warning | info | dark

This loop dynamically generates alert styles, allowing you to easily customize alerts by defining your own classes and colors.

@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    @if $state == "light" {
      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state}-contrast);
    } @else {
      --#{$prefix}alert-color: var(--#{$prefix}#{$state});
      --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state});
    }
    --#{$prefix}alert-icon-shadow-color: var(--#{$prefix}#{$state}-rgb);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-link-hover-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-hr: var(--#{$prefix}#{$state});
    --#{$prefix}alert-icon-bg: var(--#{$prefix}#{$state});
  }
}

Outline Alerts PRO

An outline style variant with both border and text have the same color.

<div class="alert alert-outline-primary" role="alert">
  This is a primary solid alert — check it out!
</div>
Class Value
class="alert alert-outline-{value}" primary | secondary | success | danger | warning | info | dark

This loop dynamically creates customizable outline alert styles, enabling you to easily define your own classes and colors for tailored alert designs.

@each $state in map-keys($theme-colors) {
  .alert-outline-#{$state} {
    @if $state == "light" {
      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state}-contrast);
    }
    @else {
      --#{$prefix}alert-color: var(--#{$prefix}#{$state});
      --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state});
    }
    --#{$prefix}alert-icon-shadow-color: var(--#{$prefix}#{$state}-rgb);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-link-hover-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-hr: var(--#{$prefix}#{$state});
    --#{$prefix}alert-icon-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-icon-bg: var(--#{$prefix}#{$state}-bg-subtle);
  }
}

Solid Alerts PRO

A solid background style variant with white text and solid color background.

<div class="alert alert-solid-primary" role="alert">
  This is a primary solid alert — check it out!
</div>
Class Value
class="alert alert-solid-{value}" primary | secondary | success | danger | warning | info | dark

This loop dynamically creates customizable solid alert styles, enabling you to easily define your own classes and colors for tailored alert designs.

@each $state in map-keys($theme-colors) {
  .alert-solid-#{$state} {
    --#{$prefix}alert-icon-shadow-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-contrast);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state});
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-icon-color: var(--#{$prefix}#{$state});
  }
}

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Example of Customizing Link Color

Customize the link and hover colors in alerts by updating the relevant CSS variables. This approach ensures consistent styling across all alerts and offers a flexible way to manage and maintain your design system.

@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-link-hover-color: var(--#{$prefix}#{$state});
  }
}

Dismissible Alerts

Add .alert-dismissible class to add close icon to dismiss alert.

<div class="alert alert-primary alert-dismissible" role="alert">
  This is a primary dismissible alert — check it out!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  </button>
</div>
Example of Customizing Dismissible Alerts

Easily customize the appearance of dismissible alerts by modifying the relevant CSS variables. This method ensures consistent styling across all alerts and provides a flexible approach to managing your design system.

@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state});
  }
}

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-primary alert-dismissible" role="alert">
  <h4 class="alert-heading d-flex align-items-center gap-1"><span class="alert-icon rounded"><i class="icon-base bx bx-coffee"></i></span>Well done :)</h4>
  <hr>
  <p class="mb-0">Halvah cheesecake toffee. Cupcake jelly cookie chocolate bar topping. Cupcake candy dessert biscuit
    chocolate halvah bear claw sweet liquorice. Gummies wafer candy canes chocolate lemon drops.</p>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  </button>
</div>
Example of Customizing Additional Content

Easily customize the styling of additional content within alerts by adjusting the relevant CSS variables. This approach ensures uniformity across all alerts while offering a flexible way to maintain your design system.

@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-hr: var(--#{$prefix}#{$state});
  }
}

Alert with icon

You can also use icons to different alert variant using additional class of .d-flex and .align-items-center.

<div class="alert alert-solid-primary d-flex align-items-center gap-1" role="alert">
  <span class="alert-icon rounded"><i class="icon-base bx icon-xs bx-command"></i></span>
  This is a primary solid alert — check it out!
</div>
Example of Customizing Alerts with Icons

Easily customize alerts with icons by updating the relevant CSS variables. This approach ensures consistent icon styling across all alerts while providing flexibility to adapt to your design system.

.alert[class*="alert-solid-"] {
  --#{$prefix}alert-icon-bg: #{$white};
}

@each $state in map-keys($theme-colors) {
  .alert-solid-#{$state} {
    --#{$prefix}alert-icon-color: var(--#{$prefix}#{$state});
  }
}
© 2017- ThemeSelection, Hand-crafted & Made with ❤️