Choose a bootstrap 5.x webcomponent ->

Bootstrap Component: Alerts

Alerts

aaa Alerts are created with the .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark.

Live Preview

Success! This alert box could indicate a successful or positive action. read this message.

Info! This alert box could indicate a neutral informative change or action. read this message.

<div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action. <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-info alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action. <a href="#" class="alert-link">read this message</a>.
</div>