Bootstrap | Media queries


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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



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


My Personal Notes arrow_drop_up

COMPETITIVE PROGRAMMER

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.

About immukul

Executive Software Developer at Cavisson Systems