Bootstrap Grid Examples

We have covered quite a bit about bootstrap grids in the recent articles. This article contains bootstrap grid examples for some of the most commonly used scenarios. Let’s have a look at them.

Three column layout

The following script generates a three column layout on all devices other than mobiles. On mobiles the columns appear stacked on one another. Have a look at the code.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
        .boxgray{
            background-color: gray;
        }
        
    </style>
    </head>
    
    
    
    <body>
        
        <div class="container">
            
            <div class="row">
              <div class="col-sm-4 box boxblue">Column1</div>
              <div class="col-sm-4 box boxgray">Column2</div>
              <div class="col-sm-4 box boxblue">Column2</div>
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Now if you open the above page in browser, you should see three column layout with equal columns. This is because, each column has a class of col-sm-4

Three Unequal Column layout

The following script generate three unequal column layout. Where first column will have 16.67% width, the second column has 33% width while the third has 50% of the width. Take a look at the following code.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    </head>
    
    <body>
        
        <div class="container">
          
        </div>
        
    </body>

</html><!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    <style>
    
        .box{
            height: 300px;
        }
        
        .boxblue{
            background-color: skyblue;
            
        }
        .boxgray{
            background-color: gray;
        }
        
    </style>
    </head>
    
    
    
    <body>
        
        <div class="container">
            
            <div class="row">
              <div class="col-sm-2 box boxblue">Column1</div>
              <div class="col-sm-4 box boxgray">Column2</div>
              <div class="col-sm-6 box boxblue">Column2</div>
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Bootstrap Grid with Nested Columns

You can create bootstrap grids with nested columns as well. Nested columns are the columns within other bootstrap columns. For instance, in the following code sample there are two outer columns. The first column has a class of col-sm-4 which means it convers 33% of the whole width of the screen. the second column as a class col-sm-8. Inside the first column two more columns have been created. The first child column occupies 3/12 of the 33% width occupied by the parent column. Similarly, the second column occupies 9/12 of the total width of the parent. Take a look at the following code.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        

    </head>
    
    
    
    <body>
        
             <div class="container">
                <div class="row">
                <div class="col-sm-4" style="background-color:skyblue;">Colum1
                  <div class="row">
                    <div class="col-sm-3" style="background-color:pink;">.col-3</div>
                    <div class="col-sm-9" style="background-color:yellow;">.col-sm-9</div>
                  </div>
                </div>
                <div class="col-sm-8" style="background-color:beige;">Column2</div>
              </div>
            </div>

    </body>

</html>

Download the code Try the code

Creating a Mixed Layout

Using bootstrap, you can also create mixed layouts which change with screen size. We created one mixed layout for mobile, desktop and larger screens in the previous, let us see how to create a mixed layout for mobile and desktop only.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        

    </head>
    
    
    
    <body>
        
             <div class="container">
                <div class="row">
                <div class="col-sm-4" style="background-color:skyblue;">Colum1
                  <div class="row">
                    <div class="col-sm-3" style="background-color:pink;">.col-3</div>
                    <div class="col-sm-9" style="background-color:yellow;">.col-sm-9</div>
                  </div>
                </div>
                <div class="col-sm-8" style="background-color:beige;">Column2</div>
              </div>
            </div>

    </body>

</html>

Download the code Try the code

<<< Bootstrap Grid For Multiple Screen SizesBootstrap Grid Clear float >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .