Bootstrap Alerts

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

Have you ever tried to work with Bootstrap on your web pages?

Bootstrap is one of the most popular CSS frameworks for developing responsive websites.

Bootstrap provides us with easy ways to style websites, and it is significantly less verbose. In this article, we will discuss the various types of alerts available in Bootstrap’s .alert class. 

Any component which is given the class of .alert will inherit the default look of a standard alert. Bootstrap provides several options to style those alerts.

We will also learn about the implementation of different types of alerts in detail. Let us get into the Bootstrap alerts.

Bootstrap Alerts

Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

Different Alerts in Bootstrap

The different types of alerts in Bootstrap are:

  1. Primary alert
  2. Secondary alert
  3. Success alert
  4. Danger alert
  5. Warning alert
  6. Info alert
  7. Light alert
  8. Dark alert

Implementation of Alerts

Code

<div class="alert alert-primary" role="alert">
 This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
 This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
 This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
 This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
 This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
 This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
 This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
 This is a dark alert—check it out!
</div>


Output

Links in Alerts

Use the .alert-link utility class to quickly provide matching coloured links within any alert.

Code

<div class="alert alert-primary" role="alert">
 This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
 This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
 This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
 This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
 This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
 This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
 This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
 This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>


Output

Dismissing Alerts

These are the types of errors that can be dismissed by clicking on the cross button at the top right side of the alert.

Steps of Implementation

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin or the compiled Bootstrap JavaScript.
  • If you’re building our JavaScript from the source, it requires util.js. The compiled version includes this.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behaviour across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

Code

<div class="alert alert-warning alert-dismissible fade show" role="alert">
 <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>
</div>

Output

Additional Content Alerts

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Code

<div class="alert alert-success" role="alert">
 <h4 class="alert-heading">Well done!</h4>
 <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
 <hr>
 <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Output

Frequently Asked Questions (FAQs)

  1. What are alerts in Bootstrap?
    Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
     
  2. What class do we use to implement alerts in Bootstrap?
    We use the .alert class in Bootstrap to implement alerts.

Key Takeaways

We learned about the various types of alerts in Bootstrap. We also learned about the various links of alerts in Bootstrap. We also learned about the different states and tags of the alerts in Bootstrap. This article also explained the implementation of all types of alerts available in Bootstrap.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think