Advanced Bootstrap Helper Classes

We started bootstrap helper classes in the last article. We studied background helper classes as well as text helper classes. This article focuses on advanced bootstrap helper classes. We shall first discuss some basic miscellaneous helper classes such as “pull-left”, “show”, “hide” etc. In the last section we shall study responsive helper classes. Let’s first see some commonly used helper classes other than background and text classes.

  • .show
  • .hidden
  • .close
  • .clear-fix
  • .pull-right
  • .pull-left

Take a look at the following example to see how these classes actually work.

<!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;
        }
          .boxpink{
            background-color: pink;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4 box boxblue"></div>
                <div class="col-md-4 box boxgray pull-right"></div>
                <div class="clearfix"></div>
                <div class="col-md-4 box boxpink"></div>
                <div class="col-md-4 box boxblue pull-right hidden"></div>
            </div>
        </div>
    </body>

</html>

Download the code Try the code

Open the above page in the browser. You should see three boxes: A blue one aligned to the left. A grey one aligned to the right and a pink one under the blue box and aligned to the left. Now, pay close attention to the code and see what is happening there. We have a div with column width of 4 and background color of skyblue. This is the blue box aligned to the left. Next we have a div with column width of 4 and gray background. This is the gray box aligned to right. Ideally this should be adjacent to the blue box, but since we have used “pull-right”, the box is pulled all the way to the right of screen.

The “pull-right” class actually floats the element to the right. Therefore to display any element on the next line, we have to clear the float. This done via div with class “clearfix”. Finally another div with column width of 4 and pink background is created and displayed under the blue box.

Bootstrap Helper Classes for Responsiveness

Helper classes are extremely useful when it comes to creating layouts for multiple screen size. You might want to display certain content only on mobiles and not on other screens and vice-versa. You can achieve this functionality via bootstrap helper classes. Following are some of the helper classes for responsiveness

  • .visible-xs
  • .visible-sm
  • .visible-md
  • .visible-lg
  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

Take a look at the following code sample to see these classes in action.

<!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;
        }
          .boxpink{
            background-color: pink;
        }
        
    </style>
        
    </head>
    
   
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-4 hidden-xs box boxblue"></div>
                <div class="col-sm-4 hidden-sm visible-md hidden-lg box boxpink"></div>
                <div class="col-sm-4 visible-lg box boxgray"></div>
               
            </div>
        </div>
    </body>

</html>

Download the code Try the code

The above code contains three divs each. Each div has a column width of 4. The first blue div has a class “hidden-xs”. This means that blue box will not be visible on extra small screens. The second pink div has classes “hidden-sm” and “hidden-lg”. This means that pink box will be hidden on small and large screens and will be visible on extra small and medium screens. Finally third div has class “visible-lg”. This specifies that the gray box will only be visible on large screens.

Bootstrap Helper Classes

We have covered almost all of the fundamental bootstrap concepts. Now, is the time to see some of the most commonly used bootstrap helper classes along with their usage. Bootstrap helper classes are basically designed to control the styling of html components at run time. For instance, you use “float-right” class with any element to float it right. Using core CSS, you will have to first write custom css style and will have to import that in your element. Following are some of the most commonly used bootstrap helper classes.

Background Helpers

These classes are extremely handy when you want to change the background of any element at run time without having to write custom CSS. Following are some of the most commonly used background helper classes.

  • .bg-primary
  • .bg-info
  • .bg-success
  • .bg-danger
  • .bg-warning

Take a look at the following example to see some of the above classes in action.

<!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="bg-primary">This is with background primary</div>
          <p class="bg-warning" >This is with warning background</p>
        </div>
    </body>

</html>

Download the code Try the code

Open the above page in browser. You will see some text with dark blue background. Below that, you will see some text with light orange background. The background of the first line of text is blue because, it is inside the div having class “bg-primary”. On the other hand, the background of the second line of text is light orange because it is inside paragraph with class “bg-warning”

Text Helpers

Text helper classes helps styling of text elements in bootstrap. Following are some of the most frequently used text helper classes.

  • .text-success
  • .text-primary
  • .text-muted
  • .text-warning
  • .text-info
  • .text-danger

Have a look at the following code to see text helper classes in action.

<!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="text-success">This is text with success helper class</div>
          <p class="text-danger" >This is text with danger helper class</p>
        </div>
    </body>

</html>

Download the code Try the code

Open the above webpage in browser. You will see two lines. First line will be in green while the second line will be in red color. This is because first line of text is inside a div with class “text-success” while the second line was inside a paragraph with class “text-danger”. You should try to replace these text classes with the others and see how the text color changes.

In next and final article of this bootstrap series, we shall study more about these helper classes. Keep visting the site.

Bootstrap Push/Pull

We have covered almost all of the fundamental concept related to bootstrap grids. Now is the time to study one last concept before moving towards bootstrap helper classes. You can change the ordering of bootstrap columns using bootstrap push/pull property. The push property pushes column towards the right hand side of the screen. Similarly, pull property pulls the columns towards the left. To use push in bootstrap code use col-sm-push-x property. Here x is the number of columns to push towards right. Similarly, for pull use col-sm-pull-x property.

Bootstrap Push

Take a look at the following example to see bootstrap push in action.

<!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="row">
          <div class="col-md-6 col-md-push-3 box boxblue"></div>
        </div>
    </body>

</html>

Download the code Try the code

If you run the above code, you shall see a large sky blue rectangle centered on the screen. The actual width of this rectangular div is 6 column which is half of the screen. Also, we have pushed it three columns towards right. This aligns the grid in the middle of the page. If you want to push the rectangular div to the right half side of the screen, push it 6 columns to the right.

Bootstrap Pull

In the following example we shall create two columns. One column will be pushed to extreme right while the other will be pulled to extreme left. Take a look at the following example to see how bootstrap push/pull properties work together.

<!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="row">
          <div class="col-md-6 col-md-push-6 box boxblue">This is left box but pushed to right.</div>
          <div class="col-md-6 col-md-pull-6 box boxgray">This is right box but pulled to left.</div>
        </div>
    </body>

</html>

Download the code Try the code

Open the above webpage in some browser. You should see two boxes of equal width. Gray box would be aligned left while sky blue box would be aligned right. However, if you look at the code you would see that code for sky blue div comes before that of the gray div. But since, we are using push the sky blue div to 6 columns towards the right and pulling the gray div to six columns to the left, sky blue div appears right aligned and gray div appears left aligned.

Bootstrap Grid Offset Column

In the last article we studied how bootstrap clearfix class clears float which result in desired layout. In this article we shall study yet another awesome bootstrap trick i.e. bootstrap grid offset column. You might want to create single layout div which spans 6 columns and which is centered on the screen i.e three columns from the left and three columns from the right. You can create such layouts using bootstrap grid offset column property. Take a look at the following example to see how this works.

<!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;
            
        }
      
        
    </style>
    </head>
    
    
    
    <body>
        
        <div class="container">
            
            <div class="row">
              
              <div class="col-md-6 col-md-offset-3 box boxblue">
              </div>
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above webpage in the browser. Increase the browser screen size beyond 991 pixels i.e medium size. You should see a blue box aligned center of the screen. This box is 6 columns wide with three columns offset from the left. This means that the box will also have three columns margin from the right since total number of columns will be 3+6+3=12. Therefore the box shall appear centered on the screen. If you look at the code, the property used for setting column offset is the col-md-offset-x where x is the number of columns to offset from left.

Column Offset with Multiple Columns

Column offset is a very handy property and can be used to create very attractive layouts. In the following example we shall create four column lay out where each column will have width of 2 and column offset of 1. Take a look at the following example to see how this looks.

<!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;
            
        }
      
        
    </style>
    </head>
    
    <body>
        
        <div class="container-fluid">
            
            <div class="row">
                <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                  <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                 <div class="col-md-2 col-md-offset-1 box boxblue"></div>
                  <div class="col-md-2 col-md-offset-1 box boxblue"></div>
               
            </div>
          
        </div>
        
    </body>

</html>

Download the code Try the code

Now if you open the above webpage in a browser, you will see four blue boxes. Between the boxes will be some margin which is actually the column offset.

Now, you have seen what you can achieve with bootstrap grid column offset. You also have a knowledge of creating layouts for mixed screen sizes. Now, as a challenge use column offset property to set different margins for mobile phones and desktops. It should be easy and fun. Happy Coding!

Bootstrap Grid Clear float

Till now we have covered most of the fundamental bootstrap grid functionalities. Now is the time to cover some of the more advanced concepts. Bootstrap grid system allows you to create responsive grid based layouts. However, not all the grid columns are of equal sizes. For instance, you might be assigned a task to develop image gallery where each image is of different length. If you try to place the image within bootstrap grid cells, the layout will get distorted with empty spaces between rows. Bootstrap grid clear float class allows help us clear all preceding floats. However, lets first take a look at the following example to see what the actual problem is.

<!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-fluid">
          <h1>Knowledge House</h1>
          <div class="row">
            <div class="col-xs-6 col-sm-3" style="background-color:pink;">
              First Column<br>
              Reduce the size of the screen to less than 768 pixels and see how third and fourth column take up space under 2nd column
            </div>
            <div class="col-xs-6 col-sm-3" style="background-color:yellow;">Second Column</div>
      
            <div class="col-xs-6 col-sm-3" style="background-color:skyblue;">Third Column</div>
            <div class="col-xs-6 col-sm-3" style="background-color:gray;">Fourth Column</div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

In the above code, bootstrap grid system has been used to define layouts for small and extra small screens. From the layout it is visible that on small screen four columns with equal width shall be displayed horizontally. On the other hand, on extra small screens, Ideally two columns and two rows should be displayed where each column will take 50% of screen width.

However, if you reduce the size of your browser past 768 pixels, you shall see that on the left only column1 shall be displayed. On the right, third column shall be displayed under column two. Similarly fourth column will be displayed under the third column.m This means that you will have first column on the left and second, third and fourth column on the right. The reason behind this is that first column and second columns have different heights. First column has larger height, therefore under the second column some space is vacant. Since, bootstrap uses floats to place columns, third column finds space under the second column and displays there.

Now, the question is how to fix this? This is clearly floating problem and we need to find something similar to css “clear:both”. In bootstrap, you have “clearfix” class which you add to the div where you want to clear floats for all the preceding divs. Let’s modify our code to see how “clearfix” class solves our problem.

<!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-fluid">
          <h1>Knowledge House</h1>
          <div class="row">
            <div class="col-xs-6 col-sm-3" style="background-color:pink;">
              First Column<br>
              Reduce the size of the screen to less than 768 pixels and see how third and fourth column take up space under 2nd column
            </div>
            <div class="col-xs-6 col-sm-3" style="background-color:yellow;">Second Column</div>
            <!-- Clearfix class for extra-small screens -->
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-3" style="background-color:skyblue;">Third Column</div>
            <div class="col-xs-6 col-sm-3" style="background-color:gray;">Fourth Column</div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

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 Sizes

In the last three articles, we saw how we can create layouts for small, medium and large screen sizes using bootstrap grid systems. However, in most of the web applications you are going to develop, you will be targeting small, medium and large devices. You will not be developing separate applications for different screen sizes. Rather you will have to develop an application which adjusts itself to changing screen sizes. Bootstrap helps you do this as well.

Let’s create a webpage with four bootstrap columns. On extra small screens, the columns will be stacked vertically upon each other. On small screen the four columns will have column width in ratio of 1:5:5:1. For medium devices the ratio of the width for four columns will be 2:4:4:2. Finally for large devices the ratio will be 3:3:3:3. This means that for large devices each column will have equal width. Take a look at the following example to understand this concept.

<!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">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column1</p>
            </div>
            <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:gray;">
              <p>Column2</p>
            </div>
              <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:pink;">
              <p>Column3</p>
              </div>
             <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column4</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in browser and decrease the size of the browser so that all the columns are vertically stacked upon each other. Now, start increasing the size of browser, when the screen size becomes greater than 767 pixels, you shall see the four columns arranged horizontally. The two outer columns will take 1/12 of the total width of the screen. The inner two columns will take 5/12 of the screen size. Similarly, when the screen size becomes greater than 991 pixels i.e. medium, you shall see that two outer columns will take 2/12 of the total width of the screen. The inner two columns will take 4/12 of the screen size. Finally, when the screen size becomes greater than 1200 pixels i.e. medium, you shall see that all the four columns have equal width.

Full width Layout

In the last example the width of the screen was fixed and centered with some margins on both left and right. You can create full-width layout by replacing the “container” class with “container-fluid” class in the outer div.Take a look at the following example.

<!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-fluid">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column1</p>
            </div>
            <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:gray;">
              <p>Column2</p>
            </div>
              <div class="col-sm-5 col-md-4 col-lg-3" style="background-color:pink;">
              <p>Column3</p>
              </div>
             <div class="col-sm-1 col-md-2 col-lg-3" style="background-color:skyblue;">
              <p>Column4</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Bootstrap Grid For Large Devices

The last article explained how we can use bootstrap grid system to create layouts for medium devices. We created three column and four column layouts using bootstrap grid system for medium devices. This article explains how you can use bootstrap grid for large devices. In this article we shall create a six column as well as a four column layout on large devices using bootstrap grids.

Large devices are devices with screen width greater than 1200 pixels. To create grid-based layouts for large devices use “col-lg-x” class to a div. Here x is the number of columns out of 12 that div will take. Always remember that the number of columns of all the grids in row should be equal to 12.

Let’s have a look at our first example. Here we shall specify that on large screens, six grids should take 16.67% percent each of the width of the screen. This means that each of these three grids will have col-md-2 class. Take a look at the following script.

<!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">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:gray;">
              <p>Grid width 16.67%</p>
            </div>
              <div class="col-lg-2" style="background-color:pink;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-2" style="background-color:gray;">
              <p>Grid width 16.67%</p>
            </div>
              <div class="col-lg-2" style="background-color:pink;">
              <p>Grid width 16.67%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in the browser, you should see six columns with sky blue, gray and pink backgrounds for two grids. Reduce the size of your browser until the columns grids are vertically stacked upon each other. This is the small screen size. Now, again increase the size of your browser. When the screen size becomes large i.e. greater than 1200 pixels, bootstrap grid system tells the browser to display the columns horizontally. Now you should see six grids horizontally placed on the page. Each grid will cover 16.67% of the screen width.

Full width Layout

In the last example the width of the screen was fixed and centered with some margins on both left and right. You can create full-width layout by replacing the “container” class with “container-fluid” class in the outer div.Take a look at the following example.

<!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-fluid">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-lg-4" style="background-color:gray;">
              <p>Grid width 33%</p>
            </div>
              <div class="col-lg-4" style="background-color:pink;">
              <p>Grid width 33%</p>
              </div>
             <div class="col-lg-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

This article explained how to use bootstrap grid on medium devices. In the next article, we shall how we can use bootstrap grid on large devices.

Bootstrap Grid For Medium Devices

The last article explained how we can use bootstrap grid system to create layouts for small devices. We created three column and four column layouts using bootstrap grid system for small devices. This article explains how you can use bootstrap grid for medium devices. In this article we shall create a three column as well as a four column layout on medium devices using bootstrap grids.

Medium devices are devices with screen width ranging from 992 pixels to 1200 pixels. Screens less than 992 pixels are considered small and larger than 1200 pixels are considered extra large.To create grid-based layouts for medium devices use “col-md-x” class to a div. Here x is the number of columns out of 12 that the div will take. Always remember that the number of columns of all the grids in row should be equal to 12.

Let’s have a look at our first example. Here we shall specify that on medium screens, the three columns should take 33% percent each of the width of the screen. This means that each of these columns grids will have col-md-4 class. Take a look at the following script.

<!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">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-md-4" style="background-color:skyblue;">
              <p>Grid with 33%</p>
            </div>
            <div class="col-md-4" style="background-color:gray;">
              <p>Grid with 33%</p>
            </div>
              <div class="col-md-4" style="background-color:pink;">
              <p>Grid with 33%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in the browser, you should see three grids with sky blue, gray and pink backgrounds. Reduce the size of your browser until the three columns are vertically stacked upon each other. This is the small screen size. Now, again increase the size of your browser. When the screen size becomes medium i.e. greater than 991 pixels, bootstrap grid system tells the browser to display the grid horizontally. Now you should see three columns horizontally placed on the page. Each grid will cover 33.33% of the screen width.

Full width Layout

In the last example the width of the screen was fixed and centered with some margins on both left and right. You can create full-width layout by replacing the “container” class with “container-fluid” class in the outer div.Take a look at the following example.

<!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-fluid">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
            <div class="col-sm-4" style="background-color:gray;">
              <p>Grid width 33%</p>
            </div>
              <div class="col-sm-4" style="background-color:pink;">
              <p>Grid width 33%</p>
              </div>
             <div class="col-sm-2" style="background-color:skyblue;">
              <p>Grid width 16.67%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

This article explained how to use bootstrap grid on medium devices. In the next article, we shall how we can use bootstrap grid on large devices.

Bootstrap Grid on Small Devices

The last article explained how can we create bootstrap grids which switch from stacked to horizontal upon the change of screen size. This principle lays at the foundation of responsive nature of bootstrap framework. Responding to the changing screen size is what makes bootstrap extremely useful. This article explains how you can use bootstrap grid on small devices.

Small devices are devices with screen width ranging from 768 pixels to 991 pixels. Screens less than this pixel range are considered extra small.To implement grid system for small devices use “col-sm-x” class with each div. Here x is the number of columns out of 12 that this div will take. Always remember that the number of columns of all the grids in row should be equal to 12.

Let’s have a look at our first example. Here we shall specify that on small screens, the three grids should take 25%, 50% and 25% percent of the width of the screen. This means that these three grids will have 3, 6 and 3 columns, respectively. Take a look at the following script.

<!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">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-3" style="background-color:skyblue;">
              <p>Grid with 25%</p>
            </div>
            <div class="col-sm-6" style="background-color:gray;">
              <p>Grid with 50%</p>
            </div>
              <div class="col-sm-3" style="background-color:pink;">
              <p>Grid with 25%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

Open the above page in the browser, you should see three grids with sky blue, gray and pink backgrounds. Reduce the size of your browser until the three grids are vertically stacked upon each other. This is the extra-small screen size. Now, again increase the size of your browser. When the screen size becomes small i.e. greater than 768 pixels, bootstrap grid system tells the browser to display the grid horizontally. Now you should see three grids horizontally placed on the page. The sky blue grid takes 25% of the page, while gray takes 50% and pink also takes 25%. Another important thing to note here is that if you do not specify grid sizes for medium and large devices, the grid sizes for small devices will apply on those devices as well.

Full width Layout

In the last example the width of the screen was fixed and centered with some margins on both left and right. You can create full-width layout by replacing the “container” class with “container-fluid” class in the outer div.Take a look at the following example.

<!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-fluid">
          <h1>Knowledge Hills</h1>
          <div class="row">
            <div class="col-sm-3" style="background-color:skyblue;">
              <p>Grid with 25%</p>
            </div>
            <div class="col-sm-3" style="background-color:gray;">
              <p>Grid with 25%</p>
            </div>
              <div class="col-sm-3" style="background-color:pink;">
              <p>Grid with 25%</p>
            </div>
            <div class="col-sm-3" style="background-color:beige;">
              <p>Grid with 25%</p>
            </div>
          </div>
        </div>
        
    </body>

</html>

Download the code Try the code

This article explained how to use bootstrap grid on small devices. In the next article, we shall how we can use bootstrap grid on medium devices.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .