Layout / Grid system in Bootstrap

Bootstrap divides page as mainly usable and not used part by mentioning class name as container for div tag.All the content we need to show is inside this div tag

This container is then divided into 12 equal parts indicating a block of layout. Basic concept of layout is a tabular structure. But tables have drawbacks in layout as we cannot overlap table on each other and it is very strict with columnar and row-wise structure.

Here bootstrap we use this 12 parts scheme to layout our visual components in a div with class name row

and each unit we show has class name starting with col-[+]-[*]

Note:

[+] here indicates values as lg(large screen), md(lappy/desktop), sm(tablet), xs(mobile)

[*] here indicates value from 1 to 12

One thing to understand here is that the value you set for one component should be either 12 or components in row(div) should addup to 12

Lets say layout we wish is two column for desktop display the code will look like

1 2 3 4

<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div>

This will divide page to give output somewhat like in image below: