Bootstrap 4 Alerts

The Alert component of Bootstrap is an easy way to create an alert text box. To create an alert box, use .alert class and .alert-* to specify the type of the alert.

<div class="alert alert-success"><strong>Success!</strong> You have successfully accomplished something.</div> <div class="alert alert-info"><strong>Info!</strong> This is a ‘just so you know’ message.</div> <div class="alert alert-warning"><strong>Warning!</strong> Something went wrong, better take a look.</div> <div class="alert alert-danger"><strong>Watch out!</strong> You could be in trouble.</div>

Links within an Alert

.alert-link utility class allows us to create links with matching colors within an alert.

<div class="alert alert-success"><strong>Success!</strong> You <a class="alert-link" href="#">successfully accomplished</a> something.</div> <div class="alert alert-info"><strong>Info!</strong> This is a <a class="alert-link" href="#">’just so you know’</a> message.</div> <div class="alert alert-warning"><strong>Warning!</strong> Something went wrong <a class="alert-link" href="#">better take a look</a>.</div> <div class="alert alert-danger"><strong>Watch out!</strong> You could be in <a class="alert-link" href="#">trouble.</a></div>

Dismissable Button

To create a dismissable button using alert component use .alert-dismissableclass.

Use <button> element for proper behavior across all devices. &times is the cross symbol on which we click.

<div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> Click the cross to dismiss this alert!! </div>

Note: You can give a slight fading effect on closing by giving the classes .fade and .in