Bootstrap Grid System

Today I am going to discuss about the grid system of bootstrap. So starting from the bootstrap 2 , in bootstrap the re was a concept of container (fixed width) and container-fluid(for responsive purpose), similarly row for fixed width and row-fluid for responsive and there was only one concept of span for column and each row content 12 column grid. there was no individual option for mobile, tablet , desktop erc. Below 767px viewpoints, the column become fluid an-stack vertically.

the class name for column is span-*

the * denote for 1, 2, 3, 4, ……, 12.

for total 12 column grid system.

here span-1 column is the 1/12 part of a row , span-2 is 2/12 part of a row and so on.

similarly if have to give space on left side for a column then there is the class name called offset-*

hear the * also denote for 1, 2, 3, 4, ……, 12.

that is offset-1 will give 1/12 portion of a row before the html tag in which the class is used similarly offset-2 will give 2/12 portion of a row before the html tag in which the class is used and so on


For code and more details visit my site 

Now I am going to discuss about the bootstrap 3 grid system.

in the bootstrap 3 the container concept is same as bootstrap 2.

now in bootstrap 3 the row fluid becomes row. and here is no concept of row fluid now. and in bootstrap 3 also one row content 12 column.

in bootstrap 3 the concept of row become individual for mobile(extra small), tablet(small), medium devices, and large devices.

for extra small devices it used col-xs-*

here * is 1 to 12 that is col-xs-1 is 1/12 part,col-xs-2 is 2/12 part and so on till col-xs-12 fot 12/12 part of a row of a extra small device

and it work on below 786 px

for small devices it used col-sm-*

here * is 1 to 12 that is col-sm-1 is 1/12 part,col-sm-2 is 2/12 part and so on till col-sm-12 fot 12/12 part of a row of a small device

and it work on or above 786 px

for midiam devices it used col-md-*

here * is 1 to 12 that is col-md-1 is 1/12 part,col-md-2 is 2/12 part and so on till col-md-12 fot 12/12 part of a row of a midiam device

and it work on or above 992 px

for extra large devices it used col-lg-*

here * is 1 to 12 that is col-lg-1 is 1/12 part,col-lg-2 is 2/12 part and so on till col-lg-12 fot 12/12 part of a row of a large device

and it work on or above 1200 px

for give a offset we can use the col-*-offset-* class and the offset is also work as the grid system

the first star of the offset class is denote for xs, sm, md, lg

and the second * denote for 1 to 12

for extra small devices it used col-xs-offset-*

here * is 1 to 12 that is col-xs-offset-1 is 1/12 part,col-xs-offset-2 is 2/12 part and so on will give space before the class used tag of a extra small device

and it work on below 786 px

for small devices it used col-sm-offset-*

here * is 1 to 12 that is col-sm-offset-1 is 1/12 part,col-sm-offset-2 is 2/12 part and so on will give space before the class used tag of a small device

and it work on or above 786 px

for midiam devices it used col-md-offset-*

ahere * is 1 to 12 thet is col-md-offset-1 is 1/12 part,col-md-offset-2 is 2/12 part and so on will give space before the class used tag of a midiam device

and it work on or above 992 px

for extra large devices it used col-lg-offset-*

here * is 1 to 12 that is col-lg-offset-1 is 1/12 part,col-lg-offset-2 is 2/12 part and so on will give space before the class used tag of a large device

and it work on or above 1200 px

In bootstrap 3 there is a puss and pull concept also which will Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

And In case of bootstrap 4 the column concept become a little higher here is one more device type concept which is extra large device concept

and the grid class working device width is also modified. and here is another very interesting concept of flexible grid . that is will will automatically adjust the column without giving column size.

now the col-xs and col-xs-* is worked below 544px

the col-sm and col-sm-* is worked on or above 544px

the col-md and col-md-* is worked on or above 768px

the col-lg and col-lg-* is worked on or above 992px

the col-xl and col-xl-* is worked on or above 1200px

the working function of col-xs-*,col-sm-*,col-md-*,col-lg-*,col-xl-* is same as bootstrap 3 ,you can fing on above heading

now the col-xs-offset-* is worked below 544px

the col-sm-offset-* is worked on or above 544px

the col-md-offset-* is worked on or above 768px

the col-lg-offset-* is worked on or above 992px

the col-xl-offset-* is worked on or above 1200px

the working function of col-xs-offset-*,col-sm-offset-*,col-md-offset-*,col-lg-offset-*,col-xl-offset-* is same as bootstrap 3 ,you can find on above heading

now going to discuss about the flax column

suppose you taken a row and given the first column class name as col-md and the second column as col-md-4 and the third column as col-md now the interesting fact is the first column and the last column will be same width that is they are flex and the middle column will take 4/12 part of the row. so the rest tow column that is the first and the last column both will take 8/12 part of the row and each will take the (8/12)/2 that is 4/12 portion of a row without defining a grid column count.

and it will work for all 5 grid media screen according to its class name.

Example

For code and more details visit my site 

Thanks for reading.