Default sizes for Twitter Bootstrap 3 media queries
By Steve Claridge on 2014-04-01.
Below are the media queries used in Twitter Bootstrap 3. In other words, these are the media-width "cut off points" where your layout changes. The Bootstrap documentation contains LESS definitions for its media queries, but not the old-school CSS values - use the below if you are using CSS and want to create some rules for different-sized devices.
Mobile first queries
Use these if you are designing for mobile first, which you should be - if in doubt use this.
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) { } /* Small Devices, Tablets */
@media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { }
Desktop first queries
Use this if you are designing a full-width layout first. This is not the recommended way with Bootstrap 3.
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */
@media only screen and (max-width : 992px) { } /* Small Devices, Tablets */
@media only screen and (max-width : 768px) { } /* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */
@media only screen and (max-width : 320px) { }
Note the difference between the two ways of defining media queries: mobile first use min-width and desktop first uses max-width. Which means that the mobile first way will show your default CSS (the stuff outside of any media query) until a larger screen width is used and the desktop first will show your default until a smaller screen width is used.