Alert
Alerting makes it possible for people to keep up with the information that matters most to them. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Simple Alert
Use contextual classes to give user different messages based on context such as success, danger, or warning, etc. By default alerts will take 100% width of their parent element.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="alert alert-primary">A primary alert</div>
<div class="alert alert-secondary">A secondary alert</div>
<div class="alert alert-success">A success alert</div>
<div class="alert alert-danger">A danger alert</div>
<div class="alert alert-warning">A warning alert</div>
<div class="alert alert-info">A info alert</div>
Alert with Icon
An icon is added before the message of alert to visually convey the message. You can add any icon you want.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="alert alert-success">
<span class="pr-1"><i class="fas fa-check-circle"></i></span>
A success alert
</div>
<div class="alert alert-warning">
<span class="pr-1"><i class="fas fa-exclamation-circle"></i></span>
A warning alert
</div>
Alert with Dismiss
Alert with dimiss contains a close button, which when clicked remove the alert from website.
CSS Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="alert alert-close alert-warning">
<span class="pr-1"><i class="fas fa-exclamation-circle"></i></span>
A warning alert
<span class="close-alert"><i class="fas fa-times"></i></span>
</div>
JavaScript Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const closeBtn = document.querySelector(".close-alert");
closeBtn.addEventListener("click", function closeAlert() {
const alert = closeBtn.parentElement;
alert.remove();
});