Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap | Media queries

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 28 Mar, 2019
Improve Article
Save Article

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

<!DOCTYPE html>
body {
  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;
<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>

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
Related Articles

Start Your Coding Journey Now!