Learn Twitter bootstrap Grid System

Bootstrap is built on responsive 12-column grids, layouts, and components. So today we have understand twitter bootstrap grid system

Twitter Bootstrap   includes predefined grid classes for making grid layouts for different types of devices. For example, so here are four main classes

col-xs-  : create grid columns for extra small devices like Phones (<768px).

col-sm-:create grid columns for small devices like tablets (≥768px).

col-md-: create grid columns for medium devices like desktop (≥992px).

Col-lg- : large desktop devices (≥1200px)

Let us do an example to understand the bootstrap grid system shown example. The following example shows how to get a three equal-width columns tablet, desktops and mobile phones

<div class="container">

    <div class="row">

    <div class="col-xs-4 col-sm-4">

        Column 1

    </div>

    <div class="col-xs-4 col-sm-4">column2</div>

    <div class="col-xs-4 col-sm-4"> column3</div>

</div>

</div>

So understand this example. Here Rows placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment.  I have use the following classes in this example

"col-xs-4 col-sm-4”: “col-xs-4”-> it occupy the four column in (extra small device) such as mobile . col-sm-4: it occupy the 4 column in( small device) such as tablet. Run this example in  Firefox  then (ctrl+m) and test the  page all resolution . So row is divided into the 12 total columns

Example2: here is example mixed mobile, tablet and desktop

            <div class="row">

        <div class="col-xs-12 col-sm-6 col-lg-8"> lorum lupsum   lorum lupsum lorum lupsum lorum lupsum lorum lupus  -columns1</div>

        <div class="col-xs-6 col-lg-4">lorum lupsum   lorum lupsum lorum lupsum lorum lupsum lorum lupsum  -columns2</div>

    </div>

    <div class="row">

        <div class="col-xs-6 col-sm-4">lorum lupsum   lorum lupsum lorum lupsum lorum lupsum lorum lupsum  -columns1</div>

        <div class="col-xs-6 col-sm-4">lorum lupsum   lorum lupsum lorum lupsum lorum lupsum lorum lupsum  -columns2</div>

        <div class="col-xs-6 col-sm-4">.lorum lupsum   lorum lupsum lorum lupsum lorum lupsum lorum lupsum  -columns3</div>

    </div>

In this example   first row-first column uses the classes

col-xs-12(occupy the 12 column mobile devices)

col-sm-6(occupy the 6 column tablet devices)

col-lg-8 (occupy the 8 column larger desktop devices)           

First row-2nd column uses the classes

col-xs-6(occupy the 6 column tablet devices)

  col-lg-4 (occupy the 4 column larger desktop devices)

Similar in 2^nd row.

Offsetting Columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over two columns:

<div class="row">

        <div class="col-sm-5 col-md-5"> chesxk ksks kskdfkdsklflflk  chesxk ksks kskdfkdsklflflk  chesxk ksks kskdfkdsklflflk  chesxk ksks kskdfkdsklflflk</div>

        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-1">

            this is tesing i have to learn bootstrap grid system .this is tesing i have to learn bootstrap grid system

            this is tesing i have to learn bootstrap grid system

        </div>

    </div>

Here I use the class “col-sm-offset-2”. It gives the two column space in tablet device. In this example you note “col-sm-5” frist column and “col-sm-5” second column and two offset column. So total is 12 columns

Push and Pull coumns

Change the order of the grid columns with .col-md-push-* and .col-md-pull-* classes: you can also change coumns ordering in  all devices as show in example.

<div class="row">

        <div class="col-xs-4  col-sm-4 col-sm-push-8">columns to understand push and pull features. that help to understatnd the grid system</div>

        <div class="col-sm-8 col-sm-pull-4"> here you can check that how to do work here you can check that how to do work here you can check that how to do work</div>

    </div>