ALERTS
Alerts : Alerts are used to display a short message for the user.
COMPONENT DEMO
NORMAL ALERTS:
This is a primary alert
This is a success alert
This is a warning alert
This is an error alert
This is an info alert
<!-- Primary alert component -->
<div class="alert alert-primary p-4">
<span>This is a primary alert</span>
</div>
<!-- Success alert component -->
<div class="alert alert-success p-4">
<span>This is a success alert</span>
</div>
<!-- Warning alert component -->
<div class="alert alert-warning p-4">
<span>This is a warning alert</span>
</div>
<!-- Error alert component -->
<div class="alert alert-error p-4">
<span>This is an error alert</span>
</div>
<!-- Info alert component -->
<div class="alert alert-info p-4">
<span>This is an info alert</span>
</div>
ALERTS WITH ICONS
This is a primary alert
This is a success alert
This is a warning alert
This is an error alert
This is an info alert
<!-- Primary alert with icon -->
<div class="alert alert-primary p-4">
<span>
<i class="fas fa-star px-3"></i>
This is a primary alert
</span>
</div>
<!-- Success alert component with icon -->
<div class="alert alert-success p-4">
<span>
<i class="fas fa-check px-3"></i>
This is a success alert
</span>
</div>
<!-- Warning alert component with icon -->
<div class="alert alert-warning p-4">
<span>
<i class="fas fa-exclamation px-3"></i>
This is a warning alert
</span>
</div>
<!-- Error alert component with icon -->
<div class="alert alert-error p-4">
<span>
<i class="fas fa-exclamation-triangle px-3"></i>
This is an error alert
</span>
</div>
<!-- Info alert component with icon -->
<div class="alert alert-info p-4">
<span>
<i class="fas fa-info-circle px-3"></i>
This is an info alert
</span>
</div>
DISMISSABLE ALERTS
This is a primary alert
This is a success alert
This is a warning alert
This is an error alert
This is an info alert
<!-- Primary dismissable alert component with icon -->
<div class="alert-dismissable alert-primary p-4">
<span>
<i class="fas fa-star px-3"></i>
This is a primary alert
</span>
<i class="far fa-times-circle fa-2x close-icon
text-cursor-pointer"></i>
</div>
<!-- Success dismissable alert component with icon -->
<div class="alert-dismissable alert-success p-4">
<span>
<i class="fas fa-check px-3"></i>
This is a success alert
</span>
<i class="far fa-times-circle fa-2x close-icon
text-cursor-pointer"></i>
</div>
<!-- Warning dismissable alert component with icon -->
<div class="alert-dismissable alert-warning p-4">
<span>
<i class="fas fa-exclamation px-3"></i>
This is a warning alert
</span>
<i class="far fa-times-circle fa-2x close-icon
text-cursor-pointer"></i>
</div>
<!-- Error dismissable alert with icon -->
<div class="alert-dismissable alert-error p-4">
<span>
<i class="fas fa-exclamation-triangle px-3"></i>
This is an error alert
</span>
<i class="far fa-times-circle fa-2x close-icon
text-cursor-pointer"></i>
</div>
<!-- Info dismissable alert with icon -->
<div class="alert-dismissable alert-info p-4">
<span>
<i class="fas fa-info-circle px-3"></i>
This is an info alert
</span>
<i class="far fa-times-circle fa-2x close-icon
text-cursor-pointer"></i>
</div>
JS CODE FOR DISMISSABLE ALERTS:
const closeIcon=document.querySelector(".close-icon");
closeIcon.addEventListener("click",(e)=>{
e.target.parentElement.style.display="none";
})