bootstrap 3 max & min resolutions for col-*
twitter-bootstrap, twitter-bootstrap-3
Solution
From the documentation for the grid:
/* Extra small devices (phones, less than 768px) / / No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
It also provides the container widths:
- .col-xs-*: none (auto)
- .col-sm-*: 750px
- .col-md-*: 970px
- .col-lg-*: 1170px
Problem
I am quite impressed with the latest version of bootstrap. And I have started to work on it. Now I can understand that the grid system works on 4 column class size variants, with the following definition: ``` col-xs-* ---> mobile col-sm-* ---> tablet col-md-* ---> laptops col-lg-* ---> large monitors ``` However, I need to know, what is the minimum and maximum resolutions for which these classes gets applied on so that I can design the layout better. I am asking this because, I could see col-md class applied at 800px. I generated this resolution using Firefox's responsive view simulator.