Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the basic structure of the Bootstrap Grid

  • Difficulty Level : Hard
  • Last Updated : 30 Sep, 2021

Bootstrap grid is a very powerful tool that makes developing websites easier. It is made with flexbox hence fully responsive and also adjusts the items in the container according to the device width. The container is a wrapping element that wraps all other items and content on the web page. CSS requires this wrapping element to make the grid work properly. The .container class is the class that we usually use while making use of bootstrap in our code as it also provides some additional options like sets the alignment to the center and horizontally padding the content.

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

The .row and .col class can be used to create and manipulate the rows and columns of the grid respectively.

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



  • For small devices
    • col: It having the browser’s width less than 576px.
    • col-sm: It having the browser’s width equal to or greater than 576px.
  • For medium devices
    • col-md: It having the browser’s width equal to or greater than 768px.
  • For large and extra-large devices
    • col-lg: It having screen width equal to or greater than 992px.
    • col-xl: It having screen width equal to or greater than 1200px

Note: Here, the sm, md, lg, and xl denote the device sizes, i.e. small, medium, large and extra-large.

Basic Structure:

<div class="container">
    <div class="row">
        <div class="col-lg">
            column-1
        </div>
        
        <div class="col-lg">
            Column-2
        </div>
    </div>
</div>

This will create 2 center-aligned columns of equal widths. The class container wraps all the rows, columns, and content of the grid. The class row is used to create a row and the class col-lg denotes the device width is large.

Example: Creating 3 equal columns of equal width.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Three Equal columns</title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <div class="container">
        <div class="row">
            <div class="col-sm-4" style=
                "background-color:rgb(185, 240, 178);">
                column-1 width-4
            </div>
            <div class="col-sm-4" style=
                "background-color:rgb(112, 243, 86);">
                column-2 width-4
            </div>
            <div class="col-sm-4" style=
                "background-color:rgb(51, 179, 89);">
                column-3 width-4
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

As you can see in the output, 3 columns of equal widths are created across the web page and columns widths are adjusting according to the browser’s width making it responsive.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!