Alert

Link Color in Dark Theme

Use alert-* class to make an alert.

Primary Alert

Secondary Alert

Success Alert

Info Alert

Warning Alert

Danger Alert

Light Alert

Dark Alert

<div class="row"> 
 <div class="col-xl-6"> 
   <p class="mb-1">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-1">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-1">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-1">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-1">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-1">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-1">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-1">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

Use alert-light-* class to make an alert.

Primary Light Alert

Secondary Light Alert

Success Light Alert

Info Light Alert

Warning Light Alert

Danger Light Alert

White Light Alert

Dark Light Alert

<div class="row"> 
 <div class="col-xl-6">
   <p class="mb-1">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-1">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-1">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-1">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-1">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-1">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-1">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-1">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].

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

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

<div class="alert alert-light-warning alert-dismissible fade show" role="alert">
 <i data-feather="bell"></i>
 <p>The 
   <a class="alert-link txt-warning" href="#!">"alert-light-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.

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

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

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

<div class="row gy-3"> 
 <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

Usealert utility class to provide additional content within any alerts.

<div class="alert alert-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 alert-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 alert-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>