Press "Enter" to skip to content

Alert Examples in Bootstrap CSS

Definition :

Alert means to display the different colors to seen the content in webpage.

Program :

<html>

   <head>

      <meta name=”viewport” content=”width=device-width” initial scale=”1″>

                  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”> </script>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js”> </script>

    </head>

                <body>

                     <div class=”container”>

                                     <div class=”alert alert-info”> INFO </div>

                                                 <div class=”alert alert-success”> SUCCESS </div>

                                                 <div class=”alert alert-warning”> WARNING  </div>

                                                 <div class=”alert alert-danger”> DANGER </div>

                                </div>

                </body>

</html>

Program 2 :

<html>

   <head>

      <meta name=”viewport” content=”width=device-width” initial scale=”1″>

                  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”> </script>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js”> </script>

    </head>

                <body>

                     <div class=”container”>

                                     <div class=”alert alert-info alert-dismissible”>

                                                 <a href=”#” class=”close” data-dismiss=”alert” arial=label=”close”> Click </a>

                                                 INFO

                                </div>

                                <div class=”alert alert-info fade in”>

                                     <a href=”#” class=”close” data-dismiss=”alert” arial-label=”close”> Click </a>

                                                 INFO

                                </div>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *