Press "Enter" to skip to content

Button Examples in Bootstrap CSS

Definition :

Button is a bootstrap css class which is meant for generating buttons as per the compatability of the browser components.

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” style=”border: 1px solid red;”>

                         <button> HELLO </button> </br>

                                     <button class=”btn”> HELLO </button> </br>

                                     <button class=”btn btn-default”> HELLO </button> </br>

             <button class=”btn btn-primary”> HELLO </button> </br>

             <button class=”btn btn-success”> HELLO </button> </br>

                                     <button class=”btn btn-info”> HELLO </button> </br>

                                     <button class=”btn btn-warning”> HELLO </button> </br>

                                     <button class=”btn btn-danger”> HELLO </button> </br>

                                     <button class=”btn btn-link”> HELLO </button> </br>

                                </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”>

                                     <button class=”btn btn-lg btn-primary”> HELLO </button> </br>

                                                 <button class=”btn btn-sm btn-primary”> HELLO </button> </br>

                                                 <button class=”btn btn-md btn-primary”> HELLO </button> </br>

                                                 <button class=”btn btn-xs btn-primary”> HELLO </button> </br>

                                </div>

                </body>

</html>

Be First to Comment

    Leave a Reply

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