How to create warning notification alerts in Bootstrap?

Bootstrap Web Development Front End Technology

Bootstrap provides a set of classes and components to create alert messages that can be used to notify users about different types of information, such as errors, warnings, and success messages.Warning alerts are commonly used to inform users about issues or errors on a website or application.

The “alert-warning” class in Bootstrap is used to give an alert and indicate a warning message to the user. You can use it to convey different types of messages to the user, such as success, danger, info, and others, by using different classes like alert-success, alertdanger, alert-info, etc.

Approaches

We have two different approaches to creating warning notification alerts in bootstrap including the following −

Using the “Alert with link”
Using the “Dismissible Alert”

Let us look at each step in detail.

Approach 1: Using the "Alert with link method"

The first approach is to create warning notification alerts in bootstrap as “Alert with link”. alert with a link is a warning message that contains a link to provide additional information or to take the user to a specific page. This type of alert is commonly used to notify users about potential issues or errors on a website or application. To create an alert with a link in Bootstrap, you can use the “alert-link” class on an anchor tag (<a>) within an alert element.

Example

Following is an example to create warning notification alerts in bootstrap using the “Alert with link method”.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Alert with Link</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
   <div class="container py-5">
      <h4 class="text-center text-uppercase">
         Bootstrap Alert with Link
      </h4>
      <div class="alert alert-warning">
         <strong>Warning!</strong>
         There was a problem with the connection. <a href="#" class="alert-link">Please contact support.</a>
      </div>
   </div>
</body>
</html>

Approach 2: Using the “Dismissible method"

The second approach is to create warning notification alerts in bootstrap as “Dismissible Alert”. It allows the user to easily dismiss the alert by clicking on a close button. By adding the "alert-dismissible" class to the alert, which displays a close button that the user can click to dismiss the alert.

Example

Following is an example to create warning notification alerts in bootstrap using the “Dismissible Alert method”.

<!DOCTYPE html> 
<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container ">
      <h4 class="text-center text-uppercase">
         Example of a warning alert with a button
      </h4>
      <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>
         <h5 class="alert-heading">Warning</h5>
         <p>"This is a warning message. Please be aware that the content of this page may be outdated and should be used for informational purposes only. Any decisions or actions taken based on this information are the sole responsibility of the user. We recommend seeking professional advice before making any important decisions. Thank you for your understanding."</p>
         <hr>
         <p>Click the button to dismiss this alert.</p>
         <button type="button" class="btn btn-secondary mt-3" datadismiss="alert">Dismiss</button>
      </div>
   </div>
</body>
</html>

Conclusion

In this article, we examined two different approaches to create warning notification alerts in bootstrap. Here, we are using two different approaches “Alert with Link” and the “Dismissible Alert”.The "Alert with link" method involves creating a warning message that contains a link to provide additional information or to take the user to a specific page. The "Dismissiblr Alert" method involves creating a warning message that can be dismissed by the user. The two approaches each have their advantages and are used depending on the specific needs of the project.