Skip to content
Related Articles

Related Articles

Bootstrap | Media queries
  • Last Updated : 28 Mar, 2019


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..

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :