Skip to content
Related Articles

Related Articles

How to create warning notification alerts in Bootstrap ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 24 Aug, 2021
Improve Article
Save Article

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.

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
Related Articles

Start Your Coding Journey Now!