Why the need for different column classes in Twitter Bootstrap 3?
css, html, twitter-bootstrap, twitter-bootstrap-3
Solution
You have four different classes so you can have four different layouts, depending on screen size.
The key part of the Bootstrap grid system that I see most people misunderstanding is that you do not need all four classes - xs, sm, md, and lg. The browser will take the smallest one and apply that until it reaches a larger one.
So for instance, `col-xs-4` would be applied at all screen sizes if no other sizes are ever applied. Adding `col-sm|md|lg-4` to the same `div` is completely unnecessary.
As a side note, I also see `col-xs-12 col-sm-4` a lot as well, which is also unnecessary. `col-xs-12` is implied if you set a sm or larger class. Actually, 12 column is implied for any size smaller than the smallest declared. So if you just put `col-lg-4`, then `col-xs|sm|md-12` is implied.
So if you want your layout to look exactly the same at all resolutions, just use xs. If you want it to look a certain way on tablets and up, but just be stacked on phones, then just use sm. If you want that `div` to be 3 on phones, 4 on tablets, and 6 on desktops and up, then you need `col-xs-3 col-sm-4 col-md-6`.
Problem
I'm learning about the grid in Twitter Bootstrap 3 and there's something I don't understand...sorry if this is a dumb question. I understand that media queries make the width of the container class different each time eg. a viewport with a minimum width of 768px makes the container class be 750 px wide. ....a viewport with a minimum width of 1200px makes the container class be 1170px etc. However why is there a need to have different classes for columns such as .col-md-2 and .col-lg-2 as in both these cases the value is 8.333333333333332%; and then .col-md-3 and .col-lg-3 are both 25% and so on 25% of 750px would still give you propotionally the same as 25% of 1170px