Explain the basic structure of the Bootstrap grid.

I have a 9-cell grid containing images (using bootstrap columns). The grid works fine and is responsive ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...

asked Apr 26, 2022 in Education by JackTerrance

JackTerrance · Answer 1 · 2021-04-04T10:19:54+0000

Now for creating rows and columns using 12 column responsive grid systems.

First we need to create a container that acts as a wrapper for our rows and columns by using the .container class.
Then we have to create rows inside the container by using (<div class="row">) ,
Then we need to add the desired number of columns inside any row by using classes .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* the number of columns should always add up to 12 for each row. In these columns we write our contents.

The following is a Basic Structure,

<div class="container">  
    <div class="row">  
        <div class="col-*-*">col1</div>  
        <div class="col-*-*">col2</div>  
        <div class="col-*-*">col3</div>  
    </div>  
    <div class="row">  
        ...  
    </div>  
</div>  

Now we will create some examples for Grid Layouts by which we can easily make responsive website layouts.

Example 1

Two Column Layouts

In this example we will create two column layouts for different devices. In mobile the column will automatically arrange horizontally according to screen size. We know that grid system works on 12 columns, so for creating two column layouts we keep the sum of the grid column numbers equal to 12 in each row so columns will be in one line. In this example we will add three rows and inside each row we will add two columns. Let's create the example.

Step 1

First we will create a Bootstrap Template, HTML page named "TwoColLayout.html" by using the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part3</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Two Column Layouts</h1>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>  

Step 2

Now we will add rows and columns for creating Two Column Layouts by the following code; in this we will give style "background-color" for each column so output shows clearly.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part3</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Two Column Layouts</h1>  
        <!--First row with column number(4,8)-->  
        <div class="row">  
            <div class="col-sm-4" style="background-color:#8dc1aa">column1: col-sm-4</div>  
            <div class="col-sm-8" style="background-color:#808080">column2: col-sm-8</div>  
        </div>  
        <!--Second row with column number(6,6)-->  
        <div class="row">  
            <div class="col-sm-6" style="background-color:#cfa6e2">column3: col-sm-6</div>  
            <div class="col-sm-6" style="background-color:#faa76c">column4: col-sm-6</div>  
        </div>  
        <!--Third row with column number(3,9)-->  
        <div class="row">  
            <div class="col-sm-3" style="background-color:#c8fcfc">column5: col-sm-3</div>  
            <div class="col-sm-9" style="background-color: #79ad96">column6: col-sm-9</div>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>  

Output

See the output for different devices according to screen size.

Two Column Layouts