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 Alert

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion. 

<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

Here is the theme basic alert mixin which allow you to easily create alert style by adding your own class and colors. 

@mixin template-alert-variant($parent, $background)
@include template-alert-variant(".alert-MyColor", "#000000");

Outline Alerts

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 outline alert — check it out!
</div>
Class Value
class="alert alert-outline-{value}" primary | secondary | success | danger | warning | info | dark

Here is outline alert mixin which allow you to easily create outline alert style by adding your own class and colors. 

@mixin template-alert-outline-variant($parent, $background)
@include template-alert-outline-variant(".alert-outline-MyColor", "#000000");

Solid Alerts

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

Here is outline alert mixin which allow you to easily create outline alert style by adding your own class and colors. 

@mixin template-alert-solid-variant($parent, $background)
@include template-alert-solid-variant(".alert-solid-MyColor", "#000000");

Link Color

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

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-solid-primary" role="alert">
  A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Dismissable 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 mb-0" role="alert">
  <h4 class="alert-heading d-flex align-items-center"><span class="alert-icon rounded"><i class="ri-checkbox-circle-line ri-22px"></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.</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 mb-0" role="alert">
  <img class="me-2" style="width: 22px; height: 22px;" src="../../assets/img/icons/brands/edge.png" alt="">
  This is a primary solid alert with icon — check it out!
</div>