Explain the basic grid structure in Bootstrap

Last Updated : 23 Jul, 2024

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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</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:

Explain the basic table in Bootstrap

bhawnaatrish

Improve

Article Tags :

Explain the basic grid structure in Bootstrap

Similar Reads

Thank You!

What kind of Experience do you want to share?