Twitter Bootstrap 3 how to use media queries

Question

I m using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size  How can I use media queries to make this kind of logic

User · Accepted Answer

Bootstrap 3

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Note: FYI, this may be useful for debugging:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Update 2019-02-11: BS3 info is still accurate as of version 3.4.0, updated BS4 for new grid, accurate as of 4.3.0.

User · Answer

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 for xs 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            Since we write our source CSS in Sass  all our media queries are available via Sass mixins   No media query necessary for xs breakpoint as it s effectively  media  min-width  0            include media-breakpoint-up sm           include media-breakpoint-up md           include media-breakpoint-up lg           include media-breakpoint-up xl            For understand it deeply please go through below link   https   getbootstrap com docs 4 3 layout overview

User · Answer

We use the following media queries in our Less files to create the key breakpoints in our grid system      Small devices  tablets  768px and up      media  min-width   screen-sm-min              Medium devices  desktops  992px and up      media  min-width   screen-md-min              Large devices  large desktops  1200px and up      media  min-width   screen-lg-min            see also on Bootstrap

User · Answer

Here is an even easier one stop solution  including separate responsive files based on media queries     This allows all the media query logic and include logic to only have to exist on one page  the loader   It also allows to not have the media queries clutter up the responsive stylesheets themselves     loader less     this twbs include adds all bs functionality  including added libraries such as elements less  and our custom variables  import   app Resources less bootstrap less         Our base custom twbs overrides    phones  xs  i e  less than 768px  and up    no media query needed for this one since this is the default in Bootstrap   All styles initially go here   When you need a larger screen override  move those        overrides to one of the responsive files below     import  base less         Our responsive overrides based on our breakpoint vars     import url  sm-min less    min-width   screen-sm-min      tablets  768px and up   import url  md-min less    min-width   screen-md-min      desktops  992px and up   import url  large-min less    min-width   screen-lg-min      large desktops  1200px and up    base less would look like this        base less   bootstrap overrides   Extra small devices  phones  less than 768px  and up   No media query since this is the default in Bootstrap   all master site styles go here   place any responsive overrides in the perspective responsive sheets themselves    body    background-color   fadedblue      sm-min less would look like this        sm-min less   min-width   screen-sm-min   Small devices  tablets  768px and up     body    background-color   fadedgreen      your index would just have to load the loader less   lt link rel  stylesheet less  type  text css  href  loader less    gt    easy peasy

User · Answer

Here are two examples   Once the viewport becomes 700px wide or less make all h1 tags 20px    media screen and   max-width  700px       h1        font-size  20px          Make all the h1 s 20px until the viewport reaches 700px or larger    media screen and   min-width  700px       h1        font-size  20px          Hope this helps  0

User · Answer

Or simple Sass-Compass    mixin col-xs          media  max-width  767px             content           mixin col-sm          media  min-width  768px  and  max-width  991px             content           mixin col-md          media  min-width  992px  and  max-width  1199px             content           mixin col-lg          media  min-width  1200px             content            Example    content-box        include border-radius 18px        include adjust-font-size-to 18pt       padding 20px      border 1px solid red       include col-xs             width  200px          float  none

User · Answer

As of Bootstrap v3 3 6 the following media queries are used which corresponds with the documentation that outlines the responsive classes that are available  http   getbootstrap com css  responsive-utilities       Extra Small Devices   visible-xs-      media  max-width  767px         Small Devices   visible-sm-      media  min-width  768px  and  max-width  991px         Medium Devices   visible-md-      media  min-width  992px  and  max-width  1199px         Large Devices   visible-lg-      media  min-width  1200px       Media queries extracted from the Bootstrap GitHub repository from the following less files -  https   github com twbs bootstrap blob v3 3 6 less responsive-utilities less https   github com twbs bootstrap blob v3 3 6 less variables less

User · Answer

Here is a more modular example using LESS to mimic Bootstrap without importing the less files    screen-xs-max  767px   screen-sm-min  768px   screen-sm-max  991px   screen-md-min  992px   screen-md-max  1199px   screen-lg-min  1200px     xs only  media max-width   screen-xs-max         small and up  media min-width   screen-sm-min         sm only  media min-width   screen-sm-min  and  max-width   screen-sm-max         md and up  media min-width   screen-md-min         md only  media min-width   screen-md-min  and  max-width   screen-md-max         lg and up  media min-width   screen-lg-min

User · Answer

you can see in my example font sizes and background colors are changing according to the screen size    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D   lt style gt  x000D  body   x000D      background-color  lightgreen  x000D    x000D     Custom  iPhone Retina     x000D   media max-width 320px   x000D      body   x000D          background-color  lime  x000D          font-size 14px  x000D         x000D    x000D   media only screen and  min-width   320px    x000D       body   x000D          background-color  red  x000D          font-size 18px  x000D        x000D    x000D     Extra Small Devices  Phones     x000D   media only screen and  min-width   480px    x000D       body   x000D          background-color  aqua  x000D          font-size 24px  x000D        x000D    x000D     Small Devices  Tablets    x000D   media only screen and  min-width   768px    x000D       body   x000D          background-color  green  x000D          font-size 30px  x000D        x000D    x000D     Medium Devices  Desktops    x000D   media only screen and  min-width   992px    x000D       body   x000D          background-color  grey  x000D          font-size 34px  x000D        x000D    x000D     Large Devices  Wide Screens    x000D   media only screen and  min-width   1200px    x000D       body   x000D          background-color  black  x000D          font-size 42px  x000D        x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt p gt Resize the browser window  When the width of this document is larger than the height  the background-color is  lightblue   otherwise it is  lightgreen   lt  p gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

To improve the main response   You can use the media attribute of the  lt link gt  tag  it support media queries  in order to download just the code the user needs    lt link href  style css  rel  stylesheet  gt   lt link href  deviceSizeDepending css  rel  stylesheet  media   min-width  40em   gt    With this  the browser will download all CSS resources  regardless of the media attribute  The difference is that if the media-query of the media attribute is evaluated to false then that  css file and his content will not be render-blocking   Therefore  it is recommended to use the media attribute in the  lt link gt  tag since it guarantees a better user experience   Here you can read a Google article about this issue https   developers google com web fundamentals performance critical-rendering-path render-blocking-css  Some tools that will help you to automate the separation of your css code in different files according to your media-querys  Webpack https   www npmjs com package media-query-plugin  https   www npmjs com package media-query-splitting-plugin  PostCSS https   www npmjs com package postcss-extract-media-query

User · Answer

keep in mind that avoiding text scaling is the main reason responsive layouts exist  the entire logic behind responsive sites is to create functional layouts that effectively display your content so its easily readable and usable on multiple screen sizes    Although It is necessary to scale text in some cases  be careful not to miniaturise your site and miss the point    heres an example anyway    media min-width 1200px        h1  font-size 34px      media min-width 992px        h1  font-size 32px      media min-width 768px        h1  font-size 28px      media max-width 767px        h1  font-size 26px       Also keep in mind the 480 viewport has been dropped in bootstrap 3

User · Answer

If you re using LESS or SCSS SASS and you re using a LESS SCSS version of Bootstrap  you can use variables as well  provided you have access to them  A LESS translation of  full-decent s answer would be as follows    media max-width   screen-xs-max     media min-width   screen-sm-min        deprecated   screen-tablet  or  screen-sm     media min-width   screen-md-min        deprecated   screen-desktop  or  screen-md     media min-width   screen-lg-min        deprecated   screen-lg-desktop  or  screen-lg      There are also variables for  screen-sm-max and  screen-md-max  which are 1 pixel less than  screen-md-min and  screen-lg-min  respectively  typically for use with  media max-width    EDIT  If you re using SCSS SASS  variables start with a   instead of a    so it d be  screen-xs-max etc

User · Answer

Based on bisio s answer and the Bootstrap 3 code  I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet      Large desktops and laptops     media  min-width  1200px           Landscape tablets and medium desktops     media  min-width  992px  and  max-width  1199px           Portrait tablets and small desktops     media  min-width  768px  and  max-width  991px           Landscape phones and portrait tablets     media  max-width  767px           Portrait phones and smaller     media  max-width  480px

User · Answer

These are the values from Bootstrap3      Extra Small     media max-width 767px        Small     media min-width 768px  and  max-width 991px        Medium     media min-width 992px  and  max-width 1199px        Large     media min-width 1200px

User · Answer

In latest bootstrap  4 3 1   using SCSS SASS  you can use one of  mixin from  bootstrap scss mixins  breakpoints scss  Media of at least the minimum breakpoint width  No query for the smallest breakpoint  Makes the  content apply to the given breakpoint and wider    mixin media-breakpoint-up  name   breakpoints   grid-breakpoints   Media of at most the maximum breakpoint width  No query for the largest breakpoint  Makes the  content apply to the given breakpoint and narrower    mixin media-breakpoint-down  name   breakpoints   grid-breakpoints   Media that spans multiple breakpoint widths  Makes the  content apply between the min and max breakpoints   mixin media-breakpoint-between  lower   upper   breakpoints   grid-breakpoints   Media between the breakpoint s minimum and maximum widths  No minimum for the smallest breakpoint  and no maximum for the largest one  Makes the  content apply only to the given breakpoint  not viewports any wider or narrower    mixin media-breakpoint-only  name   breakpoints   grid-breakpoints   For example    content  extra     height  100      img       margin-right  0 5rem          include media-breakpoint-down xs        margin-bottom  1rem          Documentation     intro https   getbootstrap com docs 4 3 layout overview  responsive-breakpoints migration https   getbootstrap com docs 4 3 migration  responsive-utilities variables https   getbootstrap com docs 4 3 layout grid  variables   Happy coding

User · Answer

Based on the other users  answers  I wrote these custom mixins for easier usage   Less input   when-xs  rules     media  max-width   screen-xs-max     rules         when-sm  rules     media  min-width   screen-sm-min     rules         when-md  rules     media  min-width   screen-md-min     rules         when-lg  rules     media  min-width   screen-lg-min     rules          Example usage  body      when-lg       background-color  red            SCSS input   mixin when-xs      media  max-width   screen-xs-max     content       mixin when-sm      media  min-width   screen-sm-min     content       mixin when-md      media  min-width   screen-md-min     content       mixin when-lg      media  min-width   screen-lg-min     content        Example usage   body      include when-md       background-color  red          Output   media  min-width 1200px      body       background-color  red

User · Answer

Use media queries for IE    media only screen  and  min-device-width   320px   and  max-device-width   480px   and  orientation   landscape  and  -ms-high-contrast  none    -ms-high-contrast  active       media only screen  and  min-device-width   360px   and  max-device-width   640px   and  orientation   portrait  and  -ms-high-contrast  none    -ms-high-contrast  active

User · Answer

media only screen and  max-width   1200px           media only screen and  max-width   979px           media only screen and  max-width   767px           media only screen and  max-width   480px           media only screen and  max-width   320px           media  min-width  768px  and  max-width  991px            media  min-width  992px  and  max-width  1024px

[css] Twitter Bootstrap 3: how to use media queries?

Bootstrap 3

Bootstrap 4

Examples related to css

Examples related to twitter-bootstrap

Examples related to media-queries