What is Bootstrap Grid System

Bootstrap is completely free to download and it is based on Html, CSS and JavaScript framework. It gives you the ability to create responsive layouts with much less effort. This web designing interface provides us a number of options to create layouts and grids for designing web pages according to our specific requirements. Bootstrap is extensively used and has gained popularity among the new age coders who develop websites and web pages. It was originally known by a twitter name which was later on changed to Bootstrap.

If you have basic knowledge of working on Html and CSS it is generally very easy to start working with Bootstrap. The latest version of Bootstrap after Bootstrap 2.x is Bootstrap 3.

The biggest advantage of using Bootstrap for web development is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components. A number of functions can be done without writing even a single line of code thus it is easy to use and saves a lot of time. This makes it as world's one of the most popular and responsive framework for developing web pages and web applications.

Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Max container width None (auto) 750px 970px 1170px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Max column width Auto ~62px ~81px ~97px
Gutter width 15px on each side of a column (i.e. 30px)

Working With Bootstrap Grid System

Bootstrap provides it users the option of using grid system that is considered as one of the fastest and easiest method to create a layout. The Bootstrap grid system is known to provide a quick and easy way to create the layouts of the web pages that need to be designed. If comparing the two versions of Bootstrap that were available earlier and now, the previous Bootstrap 2.x had a grid system which was fixed by default, the new version, i.e. Bootstrap 3 has been introduced as mobile first responsive fluid grid system that is able to scale so as the viewport size starts increasing.

The newer version of Bootstrap allows users to include predefined grid classes that enable making grid layouts easily for a large range of devices that vary from cell phones to laptops, tablets to smart phones etc. The classes that are used are changed according to the target device and the grid size that is desired is obtained.

Grid Classes For Different Devices:

A coder can use the .col-xs-* class to create grid columns for extra small devices like cell phones. Just like this class, there are other classes such as the .col-sm-* class for small screen devices like tablets. The .col-md-* class works for creating grid columns for medium size devices like desktops. The .col-lg-* class is assigned for making grid layouts for large desktop screens.

Creating Rows And Columns:

Creating rows and columns using this 12 column responsive grid system is as easy as laying out the basic structure of the grid. It is quite simple to make columns and rows in the grid layout which involves creating a container at first that acts as a wrapper for the rows and the columns. This is done using the .container class. After this another class is used to create rows inside the container using the .row class. The other classes used to create columns inside any row are as follows .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*.

It is the columns that are the actual content area where you can place your contents such as text, images, videos, links etc.

Bootstrap grid layout can be used to create two column and three column layouts as well for any type of device such as small, medium and large screen devices. The three column layout created with the Bootstrap grid system also works in tablets and large phones in the landscape mode if the screen resolution is more than or equal to 992 pixels, whereas in the portrait mode it remains horizontal as usual.

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
<title> Example of Bootstrap 3 Two Column Grid Layout</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    /* Some custom styles to beautify this example */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style> 
</head> 
<body> 
     <div class="container"> 
        
        <div class="row"> 
            <div class="col-sm-6"> 
                <div class="demo-content"> .col-sm-6</div>
            </div>
            <div class="col-sm-6"> 
                <div class="demo-content bg-alt"> .col-sm-6</div>
            </div>
</div>        
        
        <div class="row"> 
            <div class="col-sm-4"> 
                <div class="demo-content"> .col-sm-4</div>
</div>
            <div class="col-sm-8"> 
                <div class="demo-content bg-alt"> .col-sm-8</div>
            </div>
			</div>
        
        
        <div class="row"> 
            <div class="col-sm-3"> 
                <div class="demo-content"> .col-sm-3</div>
           </div>
            <div class="col-sm-9"> 
                <div class="demo-content bg-alt"> .col-sm-9</div>
           </div>
		   </div>
		   </div>
		   
 </body>
 </html>                             		
	

Multi Column Layouts:

Another great feature that the grid system provides is the creation of multi column layouts with the use of Bootstrap 3 grid system. This makes it easy to use and access web pages efficiently in different devices as mobiles, tablets, desktops and laptops. In mobile devices the layout is rendered as one column grid layout which has 1 column and 12 rows placed above one another to make viewing easier. Whereas in case of tablets, it is rendered as two column grid layout which has 2 columns and 6 rows. This changes as per the change in device as in medium screen size devices like laptops and desktops it is rendered as three column grid layout which as 3 columns and 4 rows and finally in large screen devices like large desktops it is rendered

grid-system-illustration