Learn the Bootstrap Grid in 15 Minutes : BootStrap - ResponSive Designing

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. Unlike many web frameworks, it concerns itself with front-end development only. Anybody who knows HTML, CSS and a bit of Java Script can learn Bootstrap in no time. Responsive page layout is the layout which can change and adapt depending on the screen size of the device the user is on.

The grid consists of rows and columns. This allows us to freely position elements vertically and horizontally. Rows are block level. This means, that when we create a row, it takes up the entire width of the element it is in. You can think of rows as new lines in your layout. The horizontal alignment in the grid is done via columns. Only columns can be the direct children of a row and all content should go inside them. Placing content directly within a row will break the layout.

        
Syntax for the Bootstrap grid system:

<div class="row">

<div class="col-md-12">Content Goes Here</div>
</div>      

Rows are divided horizontally into 12 equal parts. When we place a column inside a row, we have to specify the number of parts it is going to take up. 

        

This is done by using special class .col-md-NUMBER , here Number can be 1 to 12 depending on the width of the element getting placed in that column.

 

In the class name .col-md-NUMBER  md stands for medium display size. To make the page responsive we use different classes because bootstrap uses the screen resolution and dpi into account when deciding which classes are active. This is a powerful way how to control how layouts render on different devices. 

To make it responsive according to screen size we use :

<div class="row"> <div class="col-xs-12 col-md-6"><p> To learn Angular JS and BootStrap visit http://monster.suvenconsultants.com/#section-angularJs-Bootsrtap . </p></div>

<div class="col-xs-12 col-md-6">Content</div>

Clearfix :
In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. The columns will all pile up under each other, instead of moving to the next line as they should. To make the page look perfectly aligned we use clearifix.

syntax to use clearfix:

<div class="row">
    <div class="col-xs-6 tall-column">A column much taller than the rest.</div>
    <div class="col-xs-6"></div>
    <div class="clearfix"></div>
    <div class="col-xs-6"></div>
</div>

Offsets :
By default, columns stick to each other without leaving any space, floating to the left. Any excess space remaining in that row stays empty on the right. to leave space on the left side we use offsets. 

Example for offsets:

<div class="container">
    <div class="row">
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
        <div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-7">col-xs-7</div>   </div>
    <div class="row"> <div class="col-xs-5">col-xs-5</div>  </div>
    <div class="row">
        <div class="col-xs-7">col-xs-7</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
    </div> </div>

   

To make it more clear:

CONCLUSION:

Great job! You now know the most important part of the Bootstrap framework, and you're ready to build your next responsive design. Interested in learning bootstrap ?  .