Why the need for different column classes in Twitter Bootstrap 3?

Question

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

Answer 1

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.

Answer 2

.col-xs-, .col-sm-, .col-md-, and .col-lg- all refer to different viewport sizes for there columns each is there so you can set your columns different on different devices. If you refer to this table (http://getbootstrap.com/css/#grid-options) it will show you each size that corresponds to each one of the differing classes.

Basically they look and act the same as you pointed out, but they are set up using different media queries so they differ in this factor. This is so you can have different spanning columns on different devices. let's say you like a column span of four for your medium to large devices a span of six for your small/tablet devices and a span twelve for your extra-small/phone devices. You should only have to worry about your medium and small devices in this case the large will inherit it's span from your medium declaration and the extra-small should automatically be 12 if not set. (I'm not positive on that last part but that's what it seems to be.)

So all you have to do is add .col-md-4 to all your divs as well as a .col-sm-6 and this will execute the above said layout.