Bootstrap 3: How to use media queries?

08.11.2015

What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

 

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.

Bootstrap 3: Media Query

/*==================================================
= 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: Media Query

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

}

loading