I need some help people. Need a good tutorial to understand Bootstrap grid and responsive framework. I have always worked on Media queries before. Couldn't find a good tutorial.

Isn't the official bootstrap site enough? It's very straightforward and easy to understand.

@Skipp It is but I am confused at the use of various classes related to screensizes.

@EpIcInCoGnItO what is confusing about it?

Use bootstrap site. There is nothing confusing about it. Always use columns into rows wrappers.

@newEntity Okay thanks will try

@EpIcInCoGnItO lg is for large, md is for medium, sm is for small and xs is for extra small screen sizes. You just mix and match them as you need in a grid of 12. So col-md-6 will collapse when your screen is below the medium resoultion threshold. If you need to keep that 50% width all the way to mobile sizes use col-xs-6.

You can also have different layouts on different screen sizes so don't be afraid to mix the classes as you need them. For example: 1/3 and 2/3 on desktop but 1/2 and 1/2 on mobile would give you: col-lg-4 col-md-6 in one div while col-lg-8 col-md-6 in the other

@Skipp Thanks a lot. I get your 1st para but not the 2nd.

okay so if I use col-md-6 then it means that when my screen size is anything below medium then the columns will be stacked ? and if it is medium or large then it will be a column ? how do I use classes to set for different devices.

@EpIcInCoGnItO you use a grid of 12 meaning col-XX-6 will be a column of 50% width on a selected viewport, and it will collapse to 100% width below the selected viewport.

You don't select devices, you define screen sizes with the grid layout.

So if you want a layout that has 1/3 column on the right and 2/3 on the left for desktop monitors BUT 1/2 and 1/2 on tablets and 2x 100% width rowa on smaller screens you would do:

<div class="row">
<div class="col-md-6 col-lg-8"></div>
<div class="col-md-6 col-lg-4"></div>
</div>

@Skipp I think I need to test this via code. Appreciate this. I think the code you wrote is opposite, first one should be md-4 and then md-8 if we want 1/3 on left and 2/3 on right.

@EpIcInCoGnItO i said 1/3 n the right, that makes the left one col-xx-8. :)

But yea, it would be the other way around if you want the content on the right

@Skipp Yea. let me test and will get back to you thanks.