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

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 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

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 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

Here is solid alert mixin which allow you to easily create solid 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");

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="ri-user-follow-line ri-24px"></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" role="alert">
  <span class="alert-icon rounded">
    <i class="ri-error-warning-line ri-22px"></i>
  </span>
  This is a primary solid alert — check it out!
</div>
© 2017- ThemeSelection, Hand-crafted & Made with ❤️