Is it necessary to add col-md selector in Bootstrap 3?

Question

I tried searching for an answer to this to no avail. Basically what I'm wondering is if it is necessary to specify a col-md-* value in Bootstrap 3, or if you can just use, say, col-xs-12 and col-sm-* and have the col-sm-* value dictate the col size all the way to some massive display. This seems like a no-brainer (that having col-sm would be fine) but the documentation includes seemingly redundant col-md-* values as well, such as here (taken from "Example: Mobile, Tablet, and Desktop" under "Grid System" in CSS section: ```

.col-xs-6 .col-sm-4 .col-md-4

``` Any clarification here would be greatly appreciated. Thanks!

Accepted Answer

Your intuition is correct, the lowest value you set (xs, sm or md) will dictate for the larger screen sizes; that means if you want your div to span 4 columns starting at small devices and all the way up, you just have to set `.col-sm-4`.

It works this way because of how the media queries are set up:

```
/* Extra small devices (phones, up to 480px) */ 
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-tablet) { ... }

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-desktop) { ... }

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-large-desktop) { ... }
```

If not overridden, classes for small devices will apply to larger screens as well

Is it necessary to add col-md selector in Bootstrap 3?

Solution

Problem