CSS Media queries permit you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This implies you can use CSS Media Queries to tweak the CSS for an iPad, printer or create a responsive site. Open the outline to see the complete list and find for each bootstrap media queries if your browser applies these.

Bootstrap 3 is a mobile-first front-end structure/framework. I’ve incorporated the correct order for the Media Queries underneath, but yet I’ve likewise included at the base of them the non-versatile first breakpoints on the off chance that a few individuals aren’t utilized to the mobile-first procedure since in fact both will work.

Min-Width: Refer to everything more prominent than or equivalent to the sum given.

Max-Width: Refer to everything not exactly or equivalent to the sum given.

“the phone,” “tablet,”and “desktop” actually refer to particular widths of the screen, and Phones are 767 pixels and below, tablets are 768 pixels to 979 pixels, and desktops are the default, which is anything wider than 979 pixels.

Bootstrap Media Queries

/*========== Mobile First Method ==========*/

/* Bootstrap Media Queries for Custom, iPhone Retina */

@media only screen and (min-width : 320px){

}

/* Bootstrap Media Queries for Extra Small Devices, Phones */

@media only screen and (min-width : 480px){

}

/* Bootstrap Media Queries for Small Devices, Tablets */

@media only screen and (min-width : 768px){

}

/* Bootstrap Media Queries for Medium Devices, Desktops */

@media only screen and (min-width : 992px){

}

/* Bootstrap Media Queries for Large Devices, Wide Screens */

@media only screen and (min-width : 1200px){

}

/*========== Non-Mobile First Method ==========*/

/* Bootstrap Media Queries for Large Devices, Wide Screens */

@media only screen and (max-width : 1200px){

}

/* Bootstrap Media Queries for Medium Devices, Desktops */

@media only screen and (max-width : 992px){

}

/* Bootstrap Media Queries for Small Devices, Tablets */

@media only screen and (max-width : 768px){

}

/* Bootstrap Media Queries for Extra Small Devices, Phones */

@media only screen and (max-width : 480px){

}

/* Bootstrap Media Queries for Custom, iPhone Retina */

@media only screen and (max-width : 320px){

}

Much the same Bootstrap 2, Bootstrap 3 provides responsive utilities for hiding and showing elements based on the browser size. This will likewise help us in defining our grid system.

  • .visible-xs
  • .visible-sm
  • .Visible-md
  • .Visible-lg
  • .Hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

This helps because we are able to show certain elements based on size. In our samples today, we’ll be demonstrating an extra sidebar on large desktops.

I hope this Bootstrap Media Queries information will help many learn & get to utilize it for their need. If you want to add something into it, kindly share your thoughts in a comment. That will help everyone.