Deprecated: Constant FILTER_SANITIZE_STRING is deprecated in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/wordpress-seo/src/conditionals/third-party/elementor-edit-conditional.php on line 22

Deprecated: Constant FILTER_SANITIZE_STRING is deprecated in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/wordpress-seo/src/conditionals/third-party/elementor-edit-conditional.php on line 28

Deprecated: strpos(): Passing null to parameter #1 ($haystack) of type string is deprecated in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/includes/assets/class-gf-asset-processor.php on line 59
Bootstrap Media Query Breakpoints | Pixie Nerd Theme
Deprecated: strtolower(): Passing null to parameter #1 ($string) of type string is deprecated in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/wordpress-seo/src/generators/schema-generator.php on line 185
Go to the top

Bootstrap Media Query Breakpoints


Warning: Trying to access array offset on value of type bool in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/themes/darwin/single.php on line 246

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.