Bootstrap4 Alerts
Bootstrap 4 can easily implement information alert boxes.
Alerts can be created using the.alertclass, followed by the.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightor.alert-darkclass:
Example
<div class="alert alert-success">
<strong>Success!</strong>A success message indicating a successful operation.</div>
Try it Yourself »
Alerts with Links
To add links in an alert, add thealert-linkclass to set a link that matches the alert color:
Example
<div class="alert alert-success">
<strong>Success!</strong>You should read carefully<a href="#" class="alert-link">this message</a>。
</div>
Try it Yourself »
Closing Alerts
We can add the.alert-dismissibleclass in the alert's div, then add theclass="close"anddata-dismiss="alert"class to the close button's link to set the alert closing operation.
Example
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong>A success message indicating a successful operation.</div>
Try it Yourself »
Tip:× (×) is an HTML entity character to indicate the close operation, rather than the letter "x".
Alert Animations
.fadeand.showThe class is used to set the fade-out and fade-in effects when the alert closes:
Other Extensions