4.8 Media Queries

Overview

A media query is a “command” to tell the CSS to only apply the declarations to one display size.

To change something on mobile and tablet, add this to the bottom of your CSS file:

@media (max-width: 767px) {
	/* CSS is nested here */

}

• Slides

How To

This example shows a set of CSS specifications for a jumbotron. The media query states additional style specifications that will only apply to the mobile size.

The background color changes to green on mobile, but the padding and margin remain the same.

.jumbotron{
	background-color:#cc0000;
	padding:10px;
	margin-top:20px
}

@media (max-width: 576px){
	.jumbotron{
		background-color:#00cc00;
	}
}

Grid Measurements

Bootstrap defines the following widths:

• Extra small devices (phones, less than 576px)
• Small devices (tablets, 577px up to 767px)
• Medium devices (desktops, 768px up to 991px)
• Large devices (large desktops, 992px up to 1199px)
• Extra large devices (xlarge desktops, 1200px and up)