Open In App

Explain the basic grid structure in Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap grid is a very powerful tool made up of Flexbox, creating website development easier. It is fully responsive and also adjusts the items in the container according to the device width. The class .container is needed to make the grid work properly by wrapping all the elements of it. The bootstrap grid has 12 columns present in it, although it is not necessary to make use of all the columns, the sum must not go beyond 12. They can also be merged to make wider columns as per the preference.

On basis of the device or browser’s width, the bootstrap grid system has the following classes.

Classes Device size  
col Devices having the browser’s width less than 576px For small devices
col-sm Devices having the browser’s width equal to or greater than 576px. For small devices
col-md Devices having the browser’s width equal to or greater than 768px. For medium devices
col-lg Devices having screen width equal to or greater than 992px. For large devices
col-xl Devices having screen width equal to or greater than 1200px For extra-large devices

The sm, md, lg, and xl denote the device sizes, i.e. small, medium, large and extra-large respectively.

For  3 equal columns of equal widths i.e. 4 across the web page –

<div class="container">
 <div class="row">
     <div class="col-sm-4">Col-1 width-4</div>
     <div class="col-sm-4">Col-2 width-4</div>
     <div class="col-sm-4">Col-3 width-4</div>
 </div>
</div>

 

Output:

For  3 columns of unequal widths across the web page –

<div class="container">
    <div class="row">
          <div class="col-sm-4">Col-1 width-4</div>
          <div class="col-sm-6">Col-2 width-6</div>
         <div class="col-sm-2">Col-3 width-2</div>
    </div>
</div>

Output:

Example: The following example depicts the grid structure of Bootstrap with various column sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h5>Two equal columns</h5>
      
    <div class="row">
        <div class="col-sm-6" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-6
        </div>
          
        <div class="col-sm-6" style=
            "background-color:rgb(71, 240, 121);">
            column-2 width-6
        </div>
    </div>
  
    <h5>Two unequal columns</h5>
      
    <div class="row">
        <div class="col-sm-8" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-8
        </div>
          
        <div class="col-sm-4" style=
            "background-color:rgb(71, 240, 121);">
            column-2 width-4
        </div>
    </div>
  
    <h5>Three equal columns</h5>
      
    <div class="row">
        <div class="col-sm-4" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-4
        </div>
          
        <div class="col-sm-4" style=
            "background-color:rgb(71, 240, 121);">
            column-2 width-4
        </div>
          
        <div class="col-sm-4" style=
            "background-color:rgb(55, 165, 70);">
            column-3 width-4
        </div>
    </div>
  
    <h5>Three unequal columns</h5>
      
    <div class="row">
        <div class="col-sm-2" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-2
        </div>
          
        <div class="col-sm-7" style=
            "background-color:rgb(71, 240, 121);">
            column-2 width-7
        </div>
          
        <div class="col-sm-3" style=
            "background-color:rgb(55, 165, 70);">
            column-3 width-3
        </div>
    </div>
  
    <h5>six equal columns</h5>
  
    <div class="row">
        <div class="col-sm-2" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-2
        </div>
  
        <div class="col-sm-2" style=
            "background-color:rgb(71, 240, 121);">
            column-2 width-2
        </div>
          
        <div class="col-sm-2" style=
            "background-color:rgb(55, 165, 70);">
            column-3 width-2
        </div>
  
        <div class="col-sm-2" style=
            "background-color:rgb(173, 248, 164);">
            column-4 width-2
        </div>
  
        <div class="col-sm-2" style=
            "background-color:rgb(71, 240, 121);">
            column-5 width-2
        </div>
  
        <div class="col-sm-2" style=
            "background-color:rgb(55, 165, 70);">
            column-6 width-2
        </div>
    </div>
  
    <h5>single column</h5>
      
    <div class="row">
        <div class="col-sm-12" style=
            "background-color:rgb(173, 248, 164);">
            column-1 width-12
        </div>
    </div>
</body>
  
</html>


Output:



Last Updated : 07 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads