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");

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">
  <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Well done :)</h6>
  <p class="mb-0">Halvah cheesecake toffee. Cupcake jelly cookie 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-primary d-flex" role="alert">
  <span class="badge badge-center rounded-pill bg-primary border-label-primary p-3 me-2"><i class="bx bx-command fs-6"></i></span>
  <div class="d-flex flex-column ps-1">
    <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">For a watch</h6>
    <span>This is a primary solid alert — check it out!</span>
  </div>
</div>
© 2017- ThemeSelection, Hand-crafted & Made with ❤️