how to use bootstrap3 grid system

Question

I have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.

Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.

Thanks.

Answer 1

I found these links very helpful:

http://www.helloerik.com/bootstrap-3-grid-introduction

http://bootply.com/bootstrap-3-migration-guide

Answer 2

Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,

<div class="container">
    <div class="row">
        <div class="col-md-9">     <%--this for 9X3 grid--%>
            <div class="row">
                <div class="col-md-6">   <%--this for 6X6 inner grid--%>

                </div>
                <div class="col-md-6">

                </div>
            </div>
        </div>
        <div class="col-md-3">

        </div>
    </div>
</div>

Answer 3

I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"

(a) http://getbootstrap.com/css/#grid-offsetting

(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html