Bootstrap Alerts

Bootstrap Alerts allow you to display important messages to users such as warnings, success messages, errors, or information.

Bootstrap provides different alert classes:

Class	Meaning
`alert-success`	Indicates success (green)
`alert-info`	Informational message (blue)
`alert-warning`	Warning (yellow)
`alert-danger`	Error or danger (red)
`alert-primary`, `alert-secondary`, etc. (Bootstrap 4+)	Additional styles

<div class="alert alert-success">
<strong>Success!</strong> Your data has been saved successfully.
</div>

<strong>Success!</strong> Your data has been saved successfully.

</div>

<div class="alert alert-info">
<strong>Info!</strong> New updates available.
</div>

<strong>Info!</strong> New updates available.

</div>

<div class="alert alert-warning">
<strong>Warning!</strong> Password will expire soon.
</div>

<strong>Warning!</strong> Password will expire soon.

</div>

<div class="alert alert-danger">
<strong>Error!</strong> Something went wrong.
</div>

<strong>Error!</strong> Something went wrong.

</div>

You can add a close button so users can dismiss alerts.

To make links in alerts match the alert style, use alert-link.

Bootstrap alert events can be handled using JS: