Bootstrap 3 Media Query Default Sizes

I Adore Twitter’s Bootstrap.

I find that when developing with it, that I usually need to apply some custom styles at the different screen/device sizes.

Bootstrap is a mobile-first framework. Included below are the correct order for the Media Queries, and below those are the non-mobile first breakpoints.

Min-Width: Refers to everything greater than or equal to the amount given.
Max-Width: Refers to everything less than or equal to the amount given.

Mobile First

/* 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) {

}

Non-Mobile First

/* Large Devices, Wide Screens */
@media screen and (max-width : 1199px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {

}

/* Small Devices, Tablets */
@media screen and (max-width:767px) {

}

/* Extra Small Devices, Phones */ 
@media screen and (max-width : 479px) {

}

/* Custom, iPhone Retina */ 
@media screen and (max-width : 319px) {
	
}

If you use SCSS, SASS or LESS, you can use the default variables for breakpoints.

$screen-md-min, $screen-sm-max etc.