Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Alerts

##### Link Color in Dark Theme

To create an alert, use`alert-*` class.

Primary Alert

The "alert-primary" class can be used to create an alert like this one.

Secondary Alert

The "alert-secondary" class can be used to create an alert like this one.

Success Alert

The "alert-success" class can be used to create an alert like this one.

Info Alert

The "alert-info" class can be used to create an alert like this one.

Warning Alert

The "alert-warning" class can be used to create an alert like this one.

Danger Alert

The "alert-danger" class can be used to create an alert like this one.

Light Alert

The "alert-light" class can be used to create an alert like this one.

Dark Alert

The "alert-dark" class can be used to create an alert like this one.

    <div class="row">
     <div class="col-xl-6">
       <p class="mb-0">Primary Alert</p>
       <div class="alert alert-primary dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-primary"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Secondary Alert</p>
       <div class="alert alert-secondary dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-secondary"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Success Alert</p>
       <div class="alert alert-success dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-success"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Info Alert</p>
       <div class="alert alert-info dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-info"</a>class can be used to create an alert like this one.
         </p>
       </div>
     </div>
     <div class="col-xl-6">
       <p class="mb-0">Warning Alert</p>
       <div class="alert alert-warning dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-warning"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Danger Alert</p>
       <div class="alert alert-danger dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-danger"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Light Alert</p>
       <div class="alert alert-light dark" role="alert">
         <p>The
           <a class="alert-link text-dark" href="#!">"alert-light"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Dark Alert</p>
       <div class="alert alert-dark dark" role="alert">
         <p class="txt-light">The
           <a class="alert-link text-white" href="#!">"alert-dark"</a>class can be used to create an alert like this one.
         </p>
       </div>
     </div>
    </div>

##### Link Color in Light Theme

To create an light alert, use`alert-light-*` class.

Primary Light Alert

The "alert-light-primary" class can be used to create an alert like this one.

Secondary Light Alert

The "alert-light-secondary" class can be used to create an alert like this one.

Success Light Alert

The "alert-light-success" class can be used to create an alert like this one.

Info Light Alert

The "alert-light-info" class can be used to create an alert like this one.

Warning Light Alert

The "alert-light-warning" class can be used to create an alert like this one.

Danger Light Alert

The "alert-light-danger" class can be used to create an alert like this one.

White Light Alert

The "alert-light-light" class can be used to create an alert like this one.

Dark Light Alert

The "alert-light-dark" class can be used to create an alert like this one.

    <div class="row">
     <div class="col-xl-6">
       <p class="mb-0">Primary Light Alert</p>
       <div class="alert alert-light-primary" role="alert">
         <p class="txt-primary">The
           <a class="alert-link txt-primary" href="#!">"alert-light-primary"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Secondary Light Alert</p>
       <div class="alert alert-light-secondary" role="alert">
         <p class="txt-secondary">The
           <a class="alert-link txt-secondary" href="#!">"alert-light-secondary"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Success Light Alert</p>
       <div class="alert alert-light-success" role="alert">
         <div class="txt-success">The
           <a class="alert-link txt-success" href="#!">"alert-light-success"</a>class can be used to create an alert like this one.
         </div>
       </div>
       <p class="mb-0">Info Light Alert</p>
       <div class="alert alert-light-info" role="alert">
         <div class="txt-info">The
           <a class="alert-link txt-info" href="#!">"alert-light-info"</a>class can be used to create an alert like this one.
         </div>
       </div>
     </div>
     <div class="col-xl-6">
       <p class="mb-0">Warning Light Alert</p>
       <div class="alert alert-light-warning" role="alert">
         <p class="txt-warning">The
           <a class="alert-link txt-warning" href="#!">"alert-light-warning"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Danger Light Alert</p>
       <div class="alert alert-light-danger" role="alert">
         <p class="txt-danger">The
           <a class="alert-link txt-danger" href="#!">"alert-light-danger"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">White Light Alert</p>
       <div class="alert alert-light-light" role="alert">
         <p class="txt-dark">The
           <a class="alert-link txt-dark" href="#!">"alert-light-light"</a>class can be used to create an alert like this one.
         </p>
       </div>
       <p class="mb-0">Dark Light Alert</p>
       <div class="alert alert-light-dark" role="alert">
         <p class="txt-dark">The
           <a class="alert-link txt-dark" href="#!">"alert-light-dark"</a>class can be used to create an alert like this one.
         </p>
       </div>
     </div>
    </div>

##### Outline Dark and Light Alerts

Use`border-*` utility class to provide matching border and border-width within any alert`[solid/double/inset/outset]`.

The "border-primary" class has the ability to generate on its own alerts.

The "border-success" with "outline-2x" class has the ability to generate on its own alerts.

The "double-border"&"border-warning" class has the ability to generate on its own alerts.

The "inset-border" with "border-danger" class has the ability to generate on its own alerts.

    <div class="row gy-3">
     <div class="col-xl-6">
       <div class="alert txt-primary border-primary alert-dismissible fade show" role="alert">
         <i data-feather="clock"></i>
         <p>The<code>"border-primary"</code>class has the ability to generate on its own alerts.</p>
         <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
       <div class="alert txt-success border-success outline-2x alert-dismissible fade show alert-icons" role="alert">
         <i data-feather="thumbs-up"></i>
         <p>The
           <b class="txt-success">"border-success"</b>with
           <b class="txt-success">"outline-2x"</b>class has the ability to generate on its own alerts.
         </p>
         <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
     </div>
     <div class="col-xl-6">
       <div class="alert txt-warning double-border border-warning alert-dismissible fade show alert-icons" role="alert">
         <i data-feather="alert-triangle"></i>
         <p>The
           <b class="txt-warning">"double-border"</b>;&
           <b class="txt-warning">"border-warning"</b>class has the ability to generate on its own alerts.
         </p>
         <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
       <div class="alert txt-danger inset-border border-danger outline-2x alert-dismissible fade show alert-icons" role="alert">
         <i data-feather="alert-octagon"></i>
         <p>The
           <b class="txt-danger">"inset-border"</b>with
           <b class="txt-danger">"border-danger"</b>class has the ability to generate on its own alerts.
         </p>
         <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
     </div>
    </div>

##### Alerts with Icons and Text Actions

Use `border-*` class to add dismiss text instead of icon.

Your time Over after 5 minute

Oh snap! Change a few things up Notification check

    <div class="alert border-warning alert-dismissible fade show p-0" role="alert">
     <div class="alert-arrow bg-warning">
       <i class="icon-timer"></i>
     </div>
     <p>Your time Over after<strong class="txt-dark">5</strong>minute</p>
     <button class="p-0 border-0 me-2 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close">
       <span class="bg-warning px-3 py-1" aria-hidden="true">Check</span>
     </button>
    </div>
    <div class="alert border-danger alert-dismissible fade show p-0 mb-0" role="alert">
     <div class="alert-arrow bg-danger">
       <i class="icon-heart"></i>
     </div>
     <p>Oh snap! Change a few things up
       <strong class="txt-dark"> Notification check</strong>
     </p>
     <button class="p-0 border-0 me-2 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close">
       <span class="bg-danger text-white px-3 py-1" aria-hidden="true">Alert</span>
     </button>
    </div>

##### Live Alert

Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

    <div id="liveAlertPlaceholder"></div>
    <button class="btn btn-dark" id="liveAlertBtn" type="button">Show Live Alert</button>

##### Dismissing Light Alert

Use `alert-light-*` class can be used to generate a light alerts and`alert-dismissible` utility class to remove the alerts.

The "alert-bg-warning" class can be used to create an alert like this one.

    <div class="alert alert-bg-warning alert-dismissible fade show" role="alert">
     <i data-feather="bell"></i>
     <p>The
       <a class="alert-link txt-warning" href="#!">"alert-bg-warning"</a>class can be used to create an alert like this one.
     </p>
     <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

##### Dismissing Dark Alert

Use `alert-*` class can be used to generate a dark alerts and`alert-dismissible` utility class to remove the alerts.

The "alert-dark" class can be used to create an alert like this one.

    <div class="alert alert-dark dark alert-dismissible fade show" role="alert">
     <i data-feather="heart"></i>
     <p class="txt-light">The
       <a class="alert-link txt-light" href="#!">"alert-dark"</a>class can be used to create an alert like this one.
     </p>
     <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

##### Left Border Alert

Use `border-left-*` class to add left border to alert.

Dark Alert: border-left-wrapper

Secondary Alert: border-left-secondary

Success Alert: border-left-success

    <div class="alert alert-light-dark light alert-dismissible fade show txt-dark border-left-dark" role="alert">
     <i data-feather="help-circle"></i>
     <p>Dark Alert: border-left-wrapper</p>
     <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-light-secondary light alert-dismissible fade show txt-secondary border-left-secondary" role="alert">
     <i data-feather="alert-octagon"></i>
     <p>Secondary Alert: border-left-secondary</p>
     <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-light-success light alert-dismissible fade show txt-success border-left-success" role="alert">
     <i data-feather="check-square"></i>
     <p>Success Alert: border-left-success</p>
     <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

##### Custom Alert Popup

Use`alert` class can be used to generate a custom alert.

###### A Crucial Update is Now Available

For improved security and functionality, install the most recent version right away.

    <div class="alert-box">
     <div class="alert alert-dismissible justify-content-center p-0 fade show" role="alert">
       <div class="alert-body">
         <svg>
           <use href="../assets/svg/icon-sprite.svg#alert-popup"></use>
         </svg>
         <h6 class="mb-1">A Crucial Update is Now Available</h6>
         <p>For improved security and functionality, install the most recent version right away.</p>
         <div class="button-box">
           <button class="btn light-background">Later</button>
           <button class="btn btn-warning">Right Now</button>
         </div>
       </div>
       <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
    </div>

##### Icons with Alerts

Use`alert alert-*` classes to add SVG icons to the alerts.

Use "alert-primary" and "stroke-primary" classes for alerts like this one.
Use "alert-secondary" and "stroke-secondary" classes for alerts like this one.
Use "alert-warning" and "stroke-warning" classes for alerts like this one.
Use "alert-success" and "stroke-success" classes for alerts like this one.
Use "alert-danger" and "stroke-danger" classes for alerts like this one.
Use "alert-info" and "stroke-info" classes for alerts like this one.
Use "alert-light" and "stroke-dark" classes for alerts like this one.
Use "alert-dark" and "stroke-dark" classes for alerts like this one.

    <div class="row">
     <div class="col-md-6">
       <div class="alert alert-primary d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-primary" data-feather="bar-chart-2"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-primary"</a>and
           <a class="alert-link text-white" href="#!">"stroke-primary"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-secondary d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-secondary" data-feather="layers"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-secondary"</a>and
           <a class="alert-link text-white" href="#!">"stroke-secondary"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-warning d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-warning" data-feather="alert-triangle"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-warning"</a>and
           <a class="alert-link text-white" href="#!">"stroke-warning"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-success d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-success" data-feather="check-square"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-success"</a>and
           <a class="alert-link text-white" href="#!">"stroke-success"</a>classes for alerts like this one.
         </span>
       </div>
     </div>
     <div class="col-md-6">
       <div class="alert alert-danger d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-danger" data-feather="alert-circle"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-danger"</a>and
           <a class="alert-link text-white" href="#!">"stroke-danger"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-info d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-info" data-feather="octagon"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-info"</a>and
           <a class="alert-link text-white" href="#!">"stroke-info"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-light d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-dark" data-feather="thumbs-up"></i>
         </div>
         <span>Use
           <a class="alert-link text-dark" href="#!">"alert-light"</a>and
           <a class="alert-link text-dark" href="#!">"stroke-dark"</a>classes for alerts like this one.
         </span>
       </div>
       <div class="alert alert-dark d-flex align-items-center" role="alert">
         <div>
           <i class="stroke-dark" data-feather="loader"></i>
         </div>
         <span class="txt-light">Use
           <a class="alert-link text-white" href="#!">"alert-dark"</a>and
           <a class="alert-link text-white" href="#!">"stroke-dark"</a>classes for alerts like this one.
         </span>
       </div>
     </div>
    </div>

##### Additional Contents

Use`alert` utility class to provide additional content within any alerts.

##### Please! Check your notifications

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

##### Something went wrong! Please, chrome update.

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

##### Please! Hidden cameras were not installed.

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    <div class="alert bg-light-primary" role="alert">
     <h5 class="alert-heading pb-2 txt-primary">Please! Check your notifications</h5>
     <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
     <hr>
     <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>
    <div class="alert bg-light-secondary" role="alert">
     <h5 class="alert-heading pb-2 txt-secondary">Something went wrong! Please, chrome update.</h5>
     <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
     <hr>
     <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>
    <div class="alert bg-light-success mb-0" role="alert">
     <h5 class="alert-heading pb-2 txt-success">Please! Hidden cameras were not installed.</h5>
     <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
     <hr>
     <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>