What is grid system ?

• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

A best example of grid system is  Grid of photoshop , all of you may have used photoshop with grid system on.
 It is widely used to design layout and content structure.
In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Bootstrap includes a responsive, mobile first fluid grid system
that appropriately scales up to 12 columns as the device or viewport size increases. It means that you can only
put 12 horizontal boxes in one row .
It includes predefined classes for easy layout options,
as well as powerful mixins for generating more semantic layouts.


How to use Bootstrap Grid system ?
 It consist of predefined classes for the columns and row that we are going to use .

1)At first you define a container with class "row ".
 <div class="row">
...........columns goes here......
</div>

2)Secondly , It's time for columns
       for example : Iam going to degine header of a website  like below :

                     

      Here , I need a logo at left corner and login and register button at the right corner.

           But Bootstrap divide a row into 12 block as below :

                  

      ->STEP for assiging columns :
a) Decide no of column :
     for example:

          

       Here, we need 5 column

b)Wriring code 

    syntax: class="col-media-no of block"
   for example : <div class="col-lg-6"></div> : This div when viewed from large screen device takes 6 block of a row

Grid options: The following table summarizes aspects of how Bootstrap grid system works across multiple devices: