How to create warning notification alerts in Bootstrap ? - GeeksforGeeks

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.
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="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 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"        rel="stylesheet">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">    </script>    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-alert.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?