Bootstrap 3 breakpoints and media queries

Question

On the Bootstrap 3 media queries documentation it says      We use the following media queries in our Less files to create the key breakpoints in our grid system       Extra small devices  phones  less than 768px     No media query since this is the default in Bootstrap      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            Are we supposed to be able to use the  screen-sm   screen-md  and  screen-lg names in our media queries as well  Because it doesn t work for me  I have to use pixel measurements such as  media  min-width  768px        before it will work  Am I doing something wrong   Also  is the reference to 480px for extra small devices a typo  Shouldn t that say up to 767px   since removed from the documentation

User · Answer

media screen and  max-width  767px         media screen and  min-width  768px  and  max-width  991px         media only screen and  min-device-width   768px  and  max-device-width   1024px  and  orientation   landscape         media screen and  min-width  992px

User · Answer

Here are the selectors used in Bootstrap 4  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

User · Answer

I know this is a bit old  but i thought i would contribute  Basing myself on the answer by  Sophy  this is what I did to add a  xxs breakpoint  I have not taken care of visible-inline  table visible  etc classes                 Mobile First Method                   col-xxs-12   col-xxs-11   col-xxs-10   col-xxs-9   col-xxs-8   col-xxs-7   col-xxs-6   col-xxs-5   col-xxs-4   col-xxs-3   col-xxs-2   col-xxs-1       position  relative      min-height  1px      padding-left  15px      padding-right  15px      float  left        visible-xxs     display none  important        Custom  iPhone Retina     media only screen and  min-width   320px  and  max-width 479px        visible-xxs       display  block  important         visible-xs       display none  important          hidden-xs       display block  important          hidden-xxs       display none  important          col-xxs-12       width  100          col-xxs-11       width  91 66666667          col-xxs-10       width  83 33333333          col-xxs-9       width  75          col-xxs-8       width  66 66666667          col-xxs-7       width  58 33333333          col-xxs-6       width  50          col-xxs-5       width  41 66666667          col-xxs-4       width  33 33333333          col-xxs-3       width  25          col-xxs-2       width  16 66666667          col-xxs-1       width  8 33333333          col-xxs-pull-12       right  100          col-xxs-pull-11       right  91 66666667          col-xxs-pull-10       right  83 33333333          col-xxs-pull-9       right  75          col-xxs-pull-8       right  66 66666667          col-xxs-pull-7       right  58 33333333          col-xxs-pull-6       right  50          col-xxs-pull-5       right  41 66666667          col-xxs-pull-4       right  33 33333333          col-xxs-pull-3       right  25          col-xxs-pull-2       right  16 66666667          col-xxs-pull-1       right  8 33333333          col-xxs-pull-0       right  auto         col-xxs-push-12       left  100          col-xxs-push-11       left  91 66666667          col-xxs-push-10       left  83 33333333          col-xxs-push-9       left  75          col-xxs-push-8       left  66 66666667          col-xxs-push-7       left  58 33333333          col-xxs-push-6       left  50          col-xxs-push-5       left  41 66666667          col-xxs-push-4       left  33 33333333          col-xxs-push-3       left  25          col-xxs-push-2       left  16 66666667          col-xxs-push-1       left  8 33333333          col-xxs-push-0       left  auto         col-xxs-offset-12       margin-left  100          col-xxs-offset-11       margin-left  91 66666667          col-xxs-offset-10       margin-left  83 33333333          col-xxs-offset-9       margin-left  75          col-xxs-offset-8       margin-left  66 66666667          col-xxs-offset-7       margin-left  58 33333333          col-xxs-offset-6       margin-left  50          col-xxs-offset-5       margin-left  41 66666667          col-xxs-offset-4       margin-left  33 33333333          col-xxs-offset-3       margin-left  25          col-xxs-offset-2       margin-left  16 66666667          col-xxs-offset-1       margin-left  8 33333333          col-xxs-offset-0       margin-left  0              Extra Small Devices  Phones     media only screen and  min-width   480px        visible-xs       display block  important             Small Devices  Tablets     media only screen and  min-width   768px        visible-xs       display none  important             Medium Devices  Desktops     media only screen and  min-width   992px           Large Devices  Wide Screens     media only screen and  min-width   1200px

User · Answer

for bootstrap 3 I have the following code in my navbar component         Navbar styling       mobile             screen and  max-width    screen-xs-max      tablet             screen and  min-width    screen-sm-min      normal             screen and  min-width    screen-md-min      wide               screen and  min-width    screen-lg-min      grid-breakpoint    screen and  min-width    grid-float-breakpoint       then you can use something like    media wide   selector  style     This uses whatever value you have the variables set to   Escaping allows you to use any arbitrary string as property or variable value  Anything inside   anything  or   anything  is used as is with no changes except interpolation   http   lesscss org

User · Answer

The reference to 480px has been removed  Instead it says      Extra small devices  phones  less than 768px        No media query since this is the default in Bootstrap      There isn t a breakpoint below 768px in Bootstrap 3   If you want to use the  screen-sm-min and other mixins then you need to be compiling with LESS  see http   getbootstrap com css  grid-less  Here s a tutorial on how to use Bootstrap 3 and LESS  http   www helloerik com bootstrap-3-less-workflow-tutorial

User · Answer

This issue has been discussed in https   github com twbs bootstrap issues 10203 By now  there is no plan to change Grid because compatibility reasons   You can get Bootstrap from this fork  branch hs  https   github com antespi bootstrap tree hs  This branch give you an extra breakpoint at 480px  so yo have to    Design for mobile first  XS  less than 480px  Add HS  Horizontal Small Devices  classes in your HTML  col-hs-   visible-hs      and design for horizontal mobile devices  HS  less than 768px  Design for tablet devices  SM  less than 992px  Design for desktop devices  MD  less than 1200px  Design for large devices  LG  more than 1200px    Design mobile first is the key to understand Bootstrap 3  This is the major change from BootStrap 2 x  As a rule template you can follow this  in LESS     template          rules for mobile vertical   lt  480           media  min-width   screen-hs-min              rules for mobile horizontal  480  gt  768                 media  min-width   screen-sm-min              rules for tablet  768  gt  992                media  min-width   screen-md-min              rules for desktop  992  gt  1200                media  min-width   screen-lg-min              rules for large   gt  1200

User · Answer

Bootstrap 4 Media Queries     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            Bootstrap 4 provides source CSS in Sass that you can include via Sass Mixins    include media-breakpoint-up xs           include media-breakpoint-up sm           include media-breakpoint-up md           include media-breakpoint-up lg           include media-breakpoint-up xl              Example usage   include media-breakpoint-up sm       some-class       display  block          Bootstrap 3 Media Queries                Mobile First Method                   Custom  iPhone Retina      media only screen and  min-width   320px           Extra Small Devices  Phones      media only screen and  min-width   480px           Small Devices  Tablets     media only screen and  min-width   768px           Medium Devices  Desktops     media only screen and  min-width   992px           Large Devices  Wide Screens     media only screen and  min-width   1200px                        Non-Mobile First Method                   Large Devices  Wide Screens     media only screen and  max-width   1200px           Medium Devices  Desktops     media only screen and  max-width   992px           Small Devices  Tablets     media only screen and  max-width   768px           Extra Small Devices  Phones      media only screen and  max-width   480px           Custom  iPhone Retina      media only screen and  max-width   320px         Bootstrap 2 3 2 Media Queries   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         Resource from   https   scotch io quick-tips default-sizes-for-twitter-bootstraps-media-queries

User · Answer

You should be able to use those breakpoints if you use http   lesscss org  to build your CSS      Extra small devices  phones  less than 768px        No media query since this is the default in Bootstrap        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         From https   getbootstrap com docs 3 4 css  grid-media-queries  In fact  screen-sm-min is a variable than is replaced by the value specified in  variable when building with Less  If you don t use Less  you can replace this variable by the value      Extra small devices  phones  less than 768px        No media query since this is the default in Bootstrap        Small devices  tablets  768px and up      media  min-width  768px           Medium devices  desktops  992px and up      media  min-width  992px           Large devices  large desktops  1200px and up      media  min-width  1200px         Bootstrap 3 officially supports Sass  https   github com twbs bootstrap-sass  If you are using Sass  and you should  the syntax is a bit different      Extra small devices  phones  less than 768px        No media query since this is the default in Bootstrap        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

User · Answer

Bootstrap does not document the media queries very well  Those variables of  screen-sm   screen-md   screen-lg are actually referring to LESS variables and not simple CSS    When you customize Bootstrap you can change the media query breakpoints and when it compiles the  screen-xx variables are changed to whatever pixel width you defined as screen-xx  This is how a framework like this can be coded once and then customized by the end user to fit their needs    A similar question on here that might provide more clarity  Bootstrap 3 0 Media queries  In your CSS  you will still have to use traditional media queries to override or add to what Bootstrap is doing   In regards to your second question  that is not a typo  Once the screen goes below 768px the framework becomes completely fluid and resizes at any device width  removing the need for breakpoints  The breakpoint at 480px exists because there are specific changes that occur to the layout for mobile optimization    To see this in action  go to this example on their site  http   getbootstrap com examples navbar-fixed-top    and resize your window to see how it treats the design after 768px

[twitter-bootstrap] Bootstrap 3 breakpoints and media queries

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to media-queries

Examples related to breakpoints