Home >>Bootstrap Tutorial >Bootstrap Grid System

Bootstrap Grid System

Bootstrap Grid

The bootstrap Grid system allows you to create advanced layouts across the page using rows and columns. The bootstrap grid system allows you up to 12 columns across the page. It is responsive and the columns are rearranged automatically for different viewport sizes.

You can also use them automatically or groups (merge) them together for wider column. You can specify up to 12 columns in a single row.

Note: It is not required that you use all 12 available columns.

Grid Classes

The Bootstrap grid system includes five classes:

  • .col- (extra small devices –used for screen width less than 576px)
  • .col-sm- (small devices – used for screen width equal to or greater than 576px)
  • .col-md- (medium devices – used for screen width equal to or greater than 768px)
  • .col-lg- (large devices – used for screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices – used for screen width equal to or greater than 1200px)
  • Note: when you resize the browser, columns will automatically adjust itself according the grid classes.

    Basic structure of bootstrap grid

    <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
    </div>
    <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    

    Grid options

      Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl

    Four Columns

    It shows how to create four equal-width columns, on all types of devices and screen width

    Let's take an example of bootstrap grid system with four columns:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
    <p>when you resizing the browser, you’ll see that the four columns are always shown in a single row .col is used for extra small devices.  </p>
    <div class="row">
      <div class="col bg-primary">.col</div>
      <div class="col bg-success">.col</div>
      <div class="col bg-danger">.col</div>
      <div class="col bg-warning">.col</div>
    </div>
    </div>
    </body>
    </html>
    
    Output:

    Two Unequal Responsive Columns

    You can also create two unequal responsive columns using the grid system:

    Let's take an example of two unequal responsive columns :
    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8 bg-warning">.col-sm-8</div>
      <div class="col-sm-4 bg-success">.col-sm-4</div>
    </div>
    </div>
    </body>
    </html>
    
    Output:

    Two Classes in a single Row

    Let's see examples how to use two classes in a row:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
    <p> when you resizing the browser, you’ll see that the four columns are show in a single row in extra small devices(.col) and in medium devices in will automatically adjust in two columns in a single row .  </p>
    <div class="row">
      <div class="col col-md-6 bg-warning">.col-sm-3</div>
      <div class="col col-md-6 bg-success">.col-sm-3</div>
        <div class="col col-md-6 bg-info">.col-sm-3</div>
      <div class="col col-md-6 bg-danger">.col-sm-3</div>
    </div>
    </div>
    </body>
    </html>
    
    Output:

    Nesting Columns

    Nesting means you can place the columns inside the other columns. To do this add a you can add a new row within the parent column after that add your nested columns. Once you have a container and row then you can nest columns.

    Let's take an example of nesting columns:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap nesting columns</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <p>Add columns inside other columns</p>
      <div class="row">
        <div class="col-8 bg-secondary py-3">
          .col-8
          <div class="row">
            <div class="col-6 bg-danger py-2">.col-6</div>
            <div class="col-6 bg-light py-2">.col-6</div>
          </div>
        </div>
        <div class="col-4 bg-info">.col-4</div>
      </div>
    </div>
    </body>
    </html>
    
    Output:

    Add columns inside other columns

    .col-8
    .col-6
    .col-6
    .col-4

when you resizing the browser, you’ll see that the four columns are always shown in a single row .col is used for extra small devices.

.col
.col
.col
.col
.col-sm-8
.col-sm-4

when you resizing the browser, you’ll see that the four columns are show in a single row in extra small devices(.col) and in medium devices in will automatically adjust in two columns in a single row .

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3