Alerts
Standard Alerts
Detailed feedback for various system states using .alert-{color}. All alerts feature a specialized left accent border.
A simple primary alert—check it out!
Success! Your changes have been saved.
Error: Something went wrong with your request.
Warning: Your subscription will expire soon.
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
Success! Your changes have been saved.
</div>
Outline Alerts
Use .alert-outline-{color} for subtle, minimal emphasis messages with transparent backgrounds.
Minimal primary alert with outline style.
Minimal success alert with outline style.
Minimal danger alert with outline style.
Minimal warning alert with outline style.
<div class="alert alert-outline-primary" role="alert">
Outline primary alert
</div>
<div class="alert alert-outline-success" role="alert">
Outline success alert
</div>
Icon & Media Alerts
Enhanced layouts using .alert-media and .alert-icon for perfectly aligned icons and labels.
This is a primary alert with a standard icon.
Congratulations! The task was completed successfully.
Critical failure: Database connection lost.
<div class="alert alert-primary alert-media" role="alert">
<div class="alert-icon">
<i class="bi bi-info-circle"></i>
</div>
<div class="alert-body">
This is an icon alert.
</div>
</div>
Dismissible Alerts
Toggle the dismissal of an alert from the front-end by adding .alert-dismissible and a close button.
Tip: You can dismiss this alert by clicking the close button on the right.
Security Warning: Your password is weak. Please update it.
System error reported in module #42.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a dismissible alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Advanced Content
Use components like .alert-heading, <hr>, and .alert-link for detailed communication.
All systems online!
Our servers are running at 100% capacity with no reported incidents in the last 24 hours.
Ensure you check the performance report for detailed metrics.
<div class="alert alert-success alert-media" role="alert">
<div class="alert-icon"><i class="bi bi-check"></i></div>
<div class="alert-body">
<h4 class="alert-heading">Well done!</h4>
<p>Additional paragraph for detailed info.</p>
<hr>
<a href="#" class="alert-link">Example Link</a>
</div>
</div>