Bootstrap Alerts

In bootstrap, alert is a way to provide messages to the users depending on the result of actions that the user made. To create alerts in bootstrap, we need to use .alert class along with other contextual classes (e.g., .alert-warning, .alert-info) for proper styling.

 

Following is the example of creating simple danger alert message using .alert class with .alert-danger contextual class.

 

<div class="alert alert-danger">

    <strong>Danger</strong> Alert - Useful to display danger message

</div>

The above example will return the result like as shown below.

 

Bootstrap alert example result

 

Like .alert-danger class, in bootstrap we have other contextual classes such as .alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-light, and .alert-dark to create different alert messages based on the requirements like as shown below.

 

Live Preview

<div class="alert alert-primary">

    <strong>Primary</strong> Alert - Useful to display important message

</div>

<div class="alert alert-secondary">

    <strong>Secondary</strong> Alert - Useful to display less important message

</div>

<div class="alert alert-success">

    <strong>Success</strong> Alert - Useful to display success message

</div>

<div class="alert alert-warning">

    <strong>Warning</strong> Alert - Useful to display warning message

</div>

<div class="alert alert-info">

    <strong>Info</strong> Alert - Useful to display informative message

</div>

<div class="alert alert-light">

    <strong>Light</strong> Alert - Simple light grey message

</div>

<div class="alert alert-dark">

    <strong>Dark</strong> Alert - Simple dark grey message

</div>

The above bootstrap example will return the result like as shown below.

 

Bootstrap alert example result

Bootstrap Matching Colored Links in Alerts

In case, if you create any hyperlinks inside of alerts, add .alert-link class to those links to provide matching colored links within any alert like as shown below.

 

Live Preview

<div class="alert alert-success">

    Profile saved successfully! <a href="#" class="alert-link">View Profile</a>

</div>

<div class="alert alert-info">

    To edit profile click. <a href="#" class="alert-link">Edit Now</a>

</div>

<div class="alert alert-warning">

    Not provided required fields. <a href="#" class="alert-link">Cancel Registration</a>

</div>

<div class="alert alert-danger">

    Your account has been deleted. <a href="#" class="alert-link">Sign up again!</a>

</div>

The above example will return the result like as shown below.

 

Bootstrap alert links example result

Bootstrap Alerts with Additional Content

In bootstrap alerts, we can add additional HTML elements like headings, paragraphs and dividers like as shown below.

 

Live Preview

<div class="alert alert-info">

    <h4 class="alert-heading"><i class="fa fa-info"></i> Welcome to Tutlane</h4>

    <p>You have successfully registered with tutlane.com. You can enjoy reading unlimited technology related tutorials from basic to advanced level. If you are interested to contribute any tutorails let us know.</p>

    <hr>

    <p class="mb-0">If you have any doubts, reach us at support@tutlane.com.</p>

</div>

The above bootstrap example will return the result like as shown below.

 

Bootstrap alert with additional content example result

Bootstrap Closing Alerts

If you observe the above examples, we created bootstrap alert messages using .alert class along with other contextual classes (e.g., .alert-success, etc.) without having any closing or dismiss option in alert.

 

To create dismiss or close alert messages in bootstrap, we need to add .alert-dismissible class to the alert container and add dismiss button element within the container with data-dismiss="alert" attribute and .close class like as shown below.

 

Live Preview

<div class="alert alert-success alert-dismissible">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Profile saved successfully!

</div>

<div class="alert alert-info alert-dismissible">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    To edit profile click here.

</div>

<div class="alert alert-warning alert-dismissible">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Not provided required fields.

</div>

<div class="alert alert-danger alert-dismissible">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Your account has been deleted.

</div>

The above bootstrap example will return the result like as shown below.

 

Bootstrap closing alerts example result

Bootstrap Animate Alerts

To animate alerts while closing or dismissing them, we need to add .fade and .show classes to the alert container like as shown below.

 

Live Preview

<div class="alert alert-success alert-dismissible fade show">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Profile saved successfully!

</div>

<div class="alert alert-info alert-dismissible fade show">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    To edit profile click here.

</div>

<div class="alert alert-warning alert-dismissible fade show">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Not provided required fields.

</div>

<div class="alert alert-danger alert-dismissible fade show">

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    Your account has been deleted.

</div>

The above bootstrap example will return the result like as shown below.

 

Bootstrap animate alerts example result

 

This is how we can create the alert messages in bootstrap using .alert class and contextual classes based on our requirements.