Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create warning notification alerts in Bootstrap ?

  • Difficulty Level : Hard
  • Last Updated : 24 Aug, 2021

Before or after performing an action, we frequently encounter specific notifications on some websites. These alert messages are highlighted text that should be taken into account when executing a task. Using preset classes in Bootstrap, these alert messages can be displayed on the website.

Approach: The .alert class followed by contextual classes are used to display the alert message on website. The alert classes are: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-dark. We can use .alert-warning to create warning notification alerts in bootstrap.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Below is the procedure to implement a simple warning alert in Bootstrap.

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.



 

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Step 2: Add the .alert and the warning alert contextual classes (e.g., .alert-warning).

<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>

Example 1: In this example, we will see types of alerts in bootstrap. Users can use any type of warning alert.

index.html




<!DOCTYPE html>
<html>
  <head>
    <title>Warning Alerts</title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href=
    />
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <div class="container py-5">
      <h4 class="text-center text-uppercase">
        GeeksForGeeks Bootstrap 5 warning messages
      </h4>
      <h6>Basic Warning alert</h6>
      <div class="alert alert-warning">
        <strong>Warning!</strong>
        There was a problem with connection.
      </div>
      <h6>Warning alert with link</h6>
      <div class="alert alert-warning">
        <strong>Warning!</strong
        There was a problem with wifi connection<a
          href="#"
          class="alert-link">
          Contact us</a>.
      </div>
      <h6>Warning alert with close button</h6>
      <div class="alert alert-warning">
        <button type="button" 
                class="close" 
                data-dismiss="alert">
          ×
        </button>
        <strong>Warning!</strong>
        There was a problem with wifi connection.
      </div>
      <h6>Warning alert with close button and fade animation</h6>
      <div class="alert alert-warning alert-dismissible fade show">
        <button type="button" 
                class="close" 
                data-dismiss="alert">
          ×
        </button>
        <strong>Warning!</strong
        There was a problem with internet connection.
      </div>
      <h6>Warning alert with heading</h6>
      <div class="alert alert-warning alert-dismissible fade show">
        <button type="button" 
                class="close"
                data-dismiss="alert">
          ×
        </button>
        <h5 class="alert-heading">Warning!</h5>
        Wrong credentials.
      </div>
    </div>
  </body>
</html>

Output:

Warning Alert Types in Bootstrap

Example 2: In this example, we will use the warning alerts using the button click. When the user clicks the button, a warning alert will be generated. 

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
    <title>Buttons and alerts</title>
    <link href=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $('#success').click(function (e) {
                e.preventDefault()
                $('#message').html(`
                <div class="alert alert-success fade in">
                    <button type="button class="close close-alert" 
                        data-dismiss="alert" aria-hidden="true">
                        ×
                    </button>This is a success message
                </div>`);
            })
  
            $('#warning').click(function (e) {
                e.preventDefault()
                $('#message').html(`
                <div class="alert alert-warning fade in">
                    <button type="button" class="close close-alert" 
                        data-dismiss="alert" aria-hidden="true">
                        ×
                    </button> This is a warning message
                </div>`);
            });
        });
    </script>
</head>
  
<body>
    <div class="container">
        <h2>GeeksForGeeks</h2>
        <p class="lead">
            Warning Alert message using bootstrap
        </p>
  
        <p>
        <form method="post">
            <button type="button" 
                class="btn btn-success" id="success">
                Success
            </button>
            <button type="button" 
                class="btn btn-warning" id="warning">
                Warning
            </button>
        </form>
        </p>
  
        <div id="message"></div>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :