Default sizes for Twitter Bootstrap 3 media queries

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.