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-link-color: var(--#{$prefix}#{$state});
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$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-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-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.

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>

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"><span class="alert-icon rounded"><i class="icon-base ri ri-user-follow-line icon-md"></i></span>For a watch</h4>
  <p class="mb-0">Bonbon sweet roll dragée lemon drops tart gummi bears fruitcake. Jujubes bonbon danish dragée
    oat cake
    cupcake macaroon. Sesame snaps pudding cotton candy.</p>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  </button>
</div>

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 flex-wrap row-gap-2" role="alert">
  <span class="alert-icon rounded">
    <i class="icon-base ri ri-error-warning-line icon-md"></i>
  </span>
  This is a primary solid alert — check it out!
</div>