Open In App

Bootstrap | Media queries

Improve
Improve
Like Article
Like
Save
Share
Report


We use a handful of media queries for delivering different styles sheet to different devices, to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Media queries for changing background color
Copy below code and save it with .htm extension and Resize the browser window to see the effect
Examples:




<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:#008000;
  color: black;
}
  
/* On screens that are 992px wide or less,
   the background color is green */
@media screen and (max-width: 992px) {
  body {
    background-color: #008000;
    color: black;
  }
}
  
/* On screens that are 600px wide or less,
  the background color is yellow */
@media screen and (max-width: 600px) {
  body {
    background-color: Yellow;
    color: Pink;
  }
}
</style>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h1>Resize the browser window to see the effect!</h1>
<p>By default, the background color of 
   the document is "green".</p>
<p> If it is 600px or less, 
     it will change to "Yellow".</p>
  
</body>
</html>



After Resizing the window we get:

Similarly, Media queries can be used in different places

  1. Media Queries For Columns
  2. Media Queries For Menus
  3. Change Font Size With Media Queries
  4. Orientation: Portrait / Landscape etc..

Last Updated : 28 Mar, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads