There are a number of frameworks that can be used to assist in developing & designing websites today. One of the most popular is Twitter’s Bootstrap, which takes a mobile-first approach.

Below are the basic media queries for both Bootstrap 3.0 and Bootstrap 2. You can use these as a good starting point for your site customizations (note that I’ve included non-mobile-first order for Bootstrap 3 as well, since some sites don’t use that particular method of designing sites).

Bootstrap 3

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* 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 Method  ==========*/

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

 

 

Bootstrap 2.3.2

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px) {
	
}

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

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

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

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

I hope these are useful. If you use a different set of media queries for Bootstrap, please discuss below.

thePixelPixie.com - WordPress boutique

Subscribe and receive my FREE eBook


4 MISTAKES You’re Making on Your Website that are Costing You MONEY!

  • This field is for validation purposes and should be left unchanged.

The Author

Save

Like thePixelPixie on Facebook

Leave a Reply

Your email address will not be published.

Ready to chat about how ThePixelPixie can help?