Press "Enter" to skip to content

Grid Examples in Bootstrap CSS

Definition :

      Grid is to provide the equal space to allocate the content.

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=”row”>

                   <div class=”col-sm-3″ style=”border:1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                  </div>

                  <div class=”row”>

                    <div class=”col-sm-6″ style=”border: 1px solid red;”> HELLO2 </div>

                                <div class=”col-sm-6″ style=”border: 1px solid red”> HELLO2 </div>

                  </div>

                  <div class=”row”>

                    <div class=”col-sm-9″ style=”border: 1px solid red”> HELLO3 </div>

                                <div class=”col-sm-3″ style=”border: 1px solid red”> HELLO3 </div>

                  </div>

                </div>

  </body>

</html>

Be First to Comment

    Leave a Reply

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