What is the purpose of using multiple bootstrap column sizes? - html

Question

I'm fairly new to Bootstrap, and I understand how Bootstrap uses a 12-column grid. When I want to make utilize a Bootstrap grid, I traditionally do it like this:
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
I also understand that different column sizes are used for different screen sizes
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
However, I've seen a lot of people do something similar to this:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
Why use multiple column sizes? Will the browser detect which one is appropriate to use?

Answer 1

There is absolutely no reason to have all three classes in this example:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
It is effectively the same as this:
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
Bootstrap grid classes work on all sizes above the size specified, so applying col-xs-6 will cause that element to also contain 6 columns on any larger screen sizes, like sm, md, etc. I'm guessing that whoever is including all three classes in the first example does not have a firm understanding of how the Bootstrap grid system works.
You only need to include multiple classes if you want the element to be a different size on different screen sizes:
<div class="row">
<div class="col-xs-4 col-md-3 col-lg-2">
...
</div>
<div class="col-xs-8 col-md-9 col-lg-10">
...
</div>
</div>

Answer 2

Multiple col sizes are for different types of screens:
xs: Extra Small screens (phones)
sm: Screen like for tablets
md: Screen like Desktop
lg: Screen for larger desktops
Basically these will be defined in various media queries in bootstrap.css which helps browser to detect which one to use.
Learn more here
Addendum
The use of different col classes mentioned above should be in the only situation where you are specifying different column sizes for different screens. For ex: if you want 12 col in xs, 6 col in sm, 3 col in md and 2 col in lg, then you can use it as col-xs-12 col-sm-6 col-md-3 col-lg-2. Otherwise if they are going to be same for all the screens then you can use any one from above, as in col-lg-6. This will tell browser to use 6 cols irrespective of screen size.

Answer 3

Have a look at this page to get an idea
http://getbootstrap.com/examples/grid/
In general The idea behind using multiple col classes is to use different width percentages based on the screen size :
Example :
if u add a col-md-6 and a col-xs-12 on a element , when the screen size is near the medium breakpoint it will use 6 columns but when the screen size is small it would use the entire width

Answer 4

The method is usually used for screen sizes. It is so you don't end up with 7 columns on a 7-inch screen. For example; with <div class="col-xs-1 col-md-3 col-lg-6"> you can have 1 column on a phone, 3 columns on a large tablet and 6 columns on a desktop monitor.