An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
<div class="alert-box alert-primary">
This is a primary alert with a link <a href="#" class="link-text link-primary">Check this out!</a>
</div>
<div class="alert-box alert-secondary">
This is a secondary alert with a link <a href="#" class="link-text link-secondary">Check this out!</a>
</div>
<div class="alert-box alert-danger">
<span>
<i class="fa fa-bug"></i>
</span>
This is a danger alert!!!
</div>
<div class="alert-box alert-warning">
<span>
<i class="fa fa-warning"></i>
</span>
This is a warning alert!!!
</div>
<div class="alert-box alert-success">
<span>
<i class="fa fa-check-circle"></i>
</span>
This is a success alert!!!
</div>
<div class="alert-box alert-primary alert-icon-right" id="alert-box">
This is a primary alert with close button
<i class="fa fa-remove alert-close" id="alert-close-button"></i>
</div>
const alertBox = document.querySelector("#alert-box")
const alertClose = document.querySelector("#alert-close-button")
alertClose.addEventListener("click", () => {
alertBox.style.display = "none";
});