Bootstrap 4, 3 and 2 css @media rules widths

Along with Font Awesome I nearly always use the Bootstrap 3 front-end framework for responsive website development. It allows a quicker workflow than starting from scratch.

But nearly always in a project there are needs to create custom CSS for things like different font sizes etc. So it's always good to know what widths Bootstrap is using in its own css @media rules.

So below are breakdowns for both Bootstrap 3 and (for archive purposes) Bootstrap 2.

 Bootstrap 4 @media rules widths

Here is the new version of bootstrap in alpha mode (as of Jan 2016).

/* Bootstrap 4 @media rules */

/***** Mobile to Desktop *****/

/* Extra Small Devices, Phones */ 
/* Bootstrap equivalent usage: 'col-xs-' */
@media (max-width: 33.9em) {

}

/* Small Devices, Tablets */
/* Bootstrap equivalent usage: 'col-sm-' */
@media (max-width: 47.9em) {

}

/* Medium Devices, Desktops */
/* Bootstrap equivalent usage: 'col-md-' */
@media (max-width: 61.9em) {

}

/* Large Devices, Wide Screens */
/* Bootstrap equivalent usage: 'col-lg-' */
@media (max-width: 74.9em) {

}

/***** Desktop to Mobile *****/

/* Large Devices, Wide Screens */
/* Bootstrap equivalent usage: 'col-lg-' */
@media (min-width: 74.9em) { {

}

/* Medium Devices, Desktops */
/* Bootstrap equivalent usage: 'col-md-' */
@media (min-width: 61.9em) {

}

/* Small Devices, Tablets */
/* Bootstrap equivalent usage: 'col-sm-' */
@media (min-width: 47.9em) {

}

/* Extra Small Devices, Phones */ 
/* Bootstrap equivalent usage: 'col-xs-' */
@media (min-width: 33.9em) {

}

 Bootstrap 3 @media rules widths

Many studios these days work on a bases of designing websites for mobiles first, desktop second which is exactly the same work flow Bootstrap 3 uses. Meaning it works from a lower screen size and scales up to tablets and so on.

Unlike Bootstrap 2 you can give the same html elements completely different column widths based on the different screen sizes.

/* Bootstrap 3 @media rules */

/***** Mobile to Desktop *****/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
/* Bootstrap equivalent usage: 'col-xs-' */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
/* Bootstrap equivalent usage: 'col-sm-' */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
/* Bootstrap equivalent usage: 'col-md-' */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
/* Bootstrap equivalent usage: 'col-lg-' */
@media only screen and (min-width : 1200px) {

}

/***** Desktop to Mobile *****/

/* Large Devices, Wide Screens */
/* Bootstrap equivalent usage: 'col-lg-' */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
/* Bootstrap equivalent usage: 'col-md-' */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
/* Bootstrap equivalent usage: 'col-sm-' */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
/* Bootstrap equivalent usage: 'col-xs-' */
@media only screen and (max-width : 480px) {

}

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

}

 Bootstrap 2.3.2 @media rules widths

Here are the @media rules for usage with Bootstrap 2. Unlike Bootstrap 3 it uses one column width fits all approach plus desktop first through to mobile.

/* Bootstrap 2.3.2 @media rules */

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

}

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

}

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

}

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

}

@media only screen and (max-width : 320px) {

}

I hope this has been a nice quick reference for the @media rules used by both versions of Bootstrap - 2 and 3.