Bootstrap Grid System

In graphic design a grid is logically structured design made up of a series of vertical and horizontal straight lines. Grids provide a consistent look and feel for your website. Different front-end frameworks have their own grid system. Bootstrap also owes its responsive nature to grid based structure which is based on 12 columns. Bootstrap based websites are designed in such a way that sum of all the columns in a page equals 12. This might sound bit confusing, however it is very simple to understand. Take a look at the following example.

Three column Webpage via Bootstrap Grid System

The following example explains how to create a simple 3 column webpage using bootstrap. The webpage will consist of three columns on medium and large screens. However when you shrink your screen size, these three columns will stack over each other. 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>

     <style>
         div
         {
             background-color: #ccc;
             border: 1px solid #333;
         }    
        
     </style>
    </head>
    
    
    <body>
    
    <div class="row">
      <div class="col-md-4">This is column1</div>
      <div class="col-md-4">This is column2</div>
      <div class="col-md-4">This is column2</div>
    </div>
    </body>

</html>

Download the code
Try the code

Now let’s see whats happening in the above code. We have created an outer div with class “row”. This is necessary if you want to use bootstrap grid system in your applications. Inside the outer div, there are further three divs. Each div has a class of “col-md-4”. This is again a css class which defines the columns that each div will take out of 12 columns. Three divs with “col-md-4” means each div will take four columns, therefore all the three divs will be equally spaced.

Here “md” specifies that this class will take effect on screens that are medium and large i.e. desktops and larger desktops. Here “md” stands for medium. There are four bootstrap classes which specify screen size. “xs” for extra small i.e phones, “sm” for tablets, “md” for desktops and “lg” for larger desktops.

Now, if you keep decreasing the size of your screen a point will come when these three divs will appear stacked over each other. This is because screen size was now decreased to “sm” and “xs”. We haven’t specified these classes in the code, therefore bootstrap will stack them over each other by default. We shall cover more about bootstrap grid system in later tutorials.

<<< Bootstrap IntroductionBootstrap Typography >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .