Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the basic grid structure in Bootstrap

  • Difficulty Level : Hard
  • Last Updated : 07 Oct, 2021

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.

ClassesDevice size 
colDevices having the browser’s width less than 576pxFor small devices
col-smDevices having the browser’s width equal to or greater than 576px.For small devices
col-mdDevices having the browser’s width equal to or greater than 768px.For medium devices
col-lgDevices having screen width equal to or greater than 992px.For large devices
col-xlDevices having screen width equal to or greater than 1200pxFor 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!