Bootstrap 3.0 Grid Explanation

Question

Can someone explain Bootstrap 3.0 Grid system. I have been using Bootstrap v2 grid which had simple span1 to span12 for columns. Now Bootstrap 3.0 has different types of columns sizes like .col- .col-sm- .col-lg-

I found this example: http://examples.getbootstrap.com/grid/index.html, but It has many different ways, like I could not understand the "Mixed: mobile and desktop" grid where .col-12 .col-lg-8 are together.

I hope to migrate my Bootstrap v2 website to Bootstrap v3, but finding these changes too much.

Please explain.

EDIT: Also got this nice article explaining Bootstrap 3 Grid (this article came after I asked my question here. Hope it helps future readers): http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

Answer 1

Checkout this excellent tutorial on the new Grid system in bootstrap 3

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

Answer 2

The basic gist of it is that the different iterations of the .col class allow you to specify grid behavior for different devices (phones, tablets, desktops). So, in the example you are asking about the .col-lg-8 specifies that the div should take up 8 columns on desktop while .col-12 specifies that the div should take up 12 columns (the entire row) on a mobile device. This level of specificity gives you precise control over how your content will be laid out on different screen sizes in a way that was not as straightforward with Bootstrap 2.

In general I've found the best way to understand what these mean in practice is to bring up the example pages on the different device types or re-size your browser window and simply compare the results.

Also, as stated in the comments to your question the idea of migrating from Bootstrap 2 to 3 is not necessarily the goal. You can attempt to do it by updating your existing .span* classes to the new .col-* classes but there are other considerations like whether your existing project is fixed width or fluid that can cause problems with this. There are many other changes between the two versions outside of grid layout that could give you problems as well.