Bootstrap Grid

In this article, we will discuss about bootstrap grid.

Purpose

Bootstrap grid is the series of rows and columns. The contents of the grid are responsive and align according to the screen size.

Bootstrap grid allows upto 12 columns across the page. You can group columns (or rows) like we perform rowspan and columnspan in the HTML table.

Bootstrap Grid Classes

The Bootstrap grid system has four classes

xs id for phones - screens less than 768px wide
sm is for tablets - screens equal to or greater than 768px wide
md is for small laptops - screens equal to or greater than 992px wide
lg class is used for laptops and desktops having screens equal to or greater than 1200px wide

Example

<!DOCTYPE html>
<html lang="en"
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" href="bootstrap.css" />
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-6">Name</div>
            <div class="col-6">City</div>
         </div>
         <div class="row">
            <div class="col-6">Karan</div>
            <div class="col-6">Delhi</div>
         </div>
         <div class="row">
            <div class="col-6">Sumit</div>
            <div class="col-6">Mumbai</div>
         </div>
      </div>
   </body>
</html>

In the above example

A new row is created using the class "row".
Each row is divided into 2 columns (6 parts each)

Here is the output

Picture showing the output of the Bootstrap grid

Click to Enlarge

Using Wild Card

If we use * in the column class, then it means that the whole 12 parts are occupied by that column. Let us work on an example

<!DOCTYPE html>
<html lang="en"
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" href="bootstrap.css" />
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-lg-6">Name</div>
            <div class="col-lg-6">City</div>
         </div>
         <div class="row">
            <div class="col-lg-* border">Karan</div>
            <div class="col-lg-12">Delhi</div>
         </div>
         <div class="row">
            <div class="col-lg-6">Sumit</div>
            <div class="col-lg-6">Mumbai</div>
         </div>
      </div>
   </body>
</html>

Here is the output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Monday, August 30, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**