How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript

Question

Currently  Twitter Bootstrap 3 have the following responsive breakpoints  768px  992px and 1200px  representing small  medium and large devices respectively   How can I detect these breakpoints using JavaScript   I would like to listen with JavaScript for all related events triggered when the screen change  And to be able to detect if the screen is for small  medium or large devices   Is there something already done  What are your suggestions

User · Answer

Here is my solution  Bootstrap 4     lt div class  alert alert-warning row  gt       lt div class  col  gt          Bootstrap breakpoint is      lt  div gt       lt div class  col  gt           lt div class  d-block d-sm-none  gt              XS          lt  div gt           lt div class  d-none d-sm-block d-md-none  gt              SM          lt  div gt           lt div class  d-none d-md-block d-lg-none  gt              MD          lt  div gt           lt div class  d-none d-lg-block d-xl-none  gt              MD          lt  div gt           lt div class  d-none d-xl-block  gt              MD          lt  div gt       lt  div gt   lt  div gt

User · Answer

I don t have enough reputation points to comment but for those who are having problems with getting  unrecognized  when they try using Maciej Gurban s ResponsiveToolKit   I was also getting that error until I noticed that Maciej actually references the toolkit from the bottom of the page in his CodePen   I tried doing that and suddenly it worked    So  use the ResponsiveToolkit but put your links in the bottom of the page        I don t know why it makes a difference but it does

User · Answer

You could use the window size and hard code the breakpoints  Using Angular   angular      module  components responsiveDetection            factory  ResponsiveDetection   function   window            return               getBreakpoint  function                      var w    window innerWidth                  if  w  lt  768                        return  xs                     else if  w  lt  992                        return  sm                     else if  w  lt  1200                        return  md                     else                       return  lg

User · Answer

Bootstrap s CSS for the  container class looks like that    container       padding-right  15px      padding-left  15px      margin-right  auto      margin-left  auto     media  min-width  768px         container           width  750px           media  min-width  992px         container           width  970px           media  min-width  1200px         container           width  1170px            So this means we can safely rely on jQuery   container   css  width   to detect breakpoints without the drawbacks of relying on jQuery window  width     We can write a function like this   function detectBreakpoint            Let s ensure we have at least 1 container in our pages      if  jQuery   container   length    0            jQuery  body   append   lt div class  container  gt  lt  div gt                var cssWidth   jQuery   container   css  width         if  cssWidth      1170px   return  lg       else if  cssWidth      970px   return  md       else if  cssWidth      750px   return  sm        return  xs       And then test it like  jQuery document  ready function         jQuery window  resize function             jQuery  p   html  current breakpoint is      detectBreakpoint                  detectBreakpoint

User · Answer

Bootstrap 4   x000D   x000D  setResponsiveDivs    x000D   x000D  function setResponsiveDivs     x000D      var data     x000D           id   visible-xs   class   d-block d-sm-none    x000D           id   visible-sm   class   d-none d-sm-block d-md-none    x000D           id   visible-md   class   d-none d-md-block d-lg-none    x000D           id   visible-lg   class   d-none d-lg-block d-xl-none    x000D           id   visible-xl   class   d-none d-xl-block   x000D         x000D   x000D      for  var i   0  i  lt  data length  i      x000D          var el   document createElement  div    x000D          el setAttribute  id   data i  id   x000D          el setAttribute  class   data i  class   x000D          document getElementsByTagName  body   0  appendChild el   x000D        x000D    x000D   x000D  function isVisible type    x000D      return window getComputedStyle document getElementById  visible-    type   null  getPropertyValue  display        block   x000D    x000D   x000D     then  at some point x000D  window onresize   function     x000D      console log isVisible  xs       true    xs         x000D      console log isVisible  sm       true    sm         x000D      console log isVisible  md       true    md         x000D      console log isVisible  lg       true    lg         x000D      console log isVisible  xl       true    xl         x000D     x000D   x000D   x000D    or minified   x000D   x000D  function setResponsiveDivs   for var e   id  visible-xs   class   d-block d-sm-none    id  visible-sm   class   d-none d-sm-block d-md-none    id  visible-md   class   d-none d-md-block d-lg-none    id  visible-lg   class   d-none d-lg-block d-xl-none    id  visible-xl   class   d-none d-xl-block    s 0 s lt e length s    var l document createElement  div   l setAttribute  id  e s  id  l setAttribute  class  e s   class    document getElementsByTagName  body   0  appendChild l   function isVisible e  return block    window getComputedStyle document getElementById  visible-  e  null  getPropertyValue  display   setResponsiveDivs    x000D   x000D   x000D

User · Answer

Maybe it ll help some of you  but there is a plugin which help you to detect on which current Bootstrap v4 breakpoint you are see  https   www npmjs com package bs-breakpoints  Simple to use  can be used with or without jQuery      document  ready function       bsBreakpoints init     console warn bsBreakpoint getCurrentBreakpoint         window  on  new bs breakpoint   function  event        console warn event breakpoint

User · Answer

Bootstrap4 with jQuery  simplified solution   lt div class  device-sm d-sm-none  gt  lt  div gt   lt div class  device-md d-md-none  gt  lt  div gt   lt div class  device-lg d-lg-none  gt  lt  div gt   lt div class  device-xl d-xl-none  gt  lt  div gt   lt script gt  var size       device-xl   is   hidden      xl         device-lg   is   hidden      lg             device-md   is   hidden      md        device-sm   is   hidden      sm     xs      alert size    lt  script gt

User · Answer

Use CSS  before and content property to print the breakpoint state in the  lt span id  breakpoint-js  gt  so the JavaScript just have to read this data to turn it as a variable to use within your function    run the snippet to see the example   NOTE  I added a few line of CSS to use the  lt span gt  as a red flag in the upper corner of my browser  Just make sure to switch it back to display none  before pushing your stuff public    x000D   x000D     initialize it with jquery when DOM is ready x000D    document  on  ready   function     x000D      getBootstrapBreakpoint    x000D      x000D   x000D     get bootstrap grid breakpoints x000D  var theBreakpoint    xs      bootstrap336 default   mobile first x000D  function getBootstrapBreakpoint    x000D     theBreakpoint   window getComputedStyle document querySelector   breakpoint-js     before   getPropertyValue  content   replace        g       x000D     console log  bootstrap grid breakpoint       theBreakpoint   x000D    x000D   breakpoint-js   x000D       display  none    comment this while developping  Switch back to display NONE before commit    x000D       optional red flag layout    x000D    position  fixed  x000D    z-index  999  x000D    top  0  x000D    left  0  x000D    color  white  x000D    padding  5px 10px  x000D    background-color  red  x000D    opacity   7  x000D       end of optional red flag layout    x000D    x000D   breakpoint-js before   x000D    content   xs      default   mobile first    x000D    x000D   media screen and  min-width  768px    x000D     breakpoint-js before   x000D      content   sm   x000D      x000D    x000D   media screen and  min-width  992px    x000D     breakpoint-js before   x000D      content   md   x000D      x000D    x000D   media screen and  min-width  1200px    x000D     breakpoint-js before   x000D      content   lg   x000D      x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  integrity  sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7  crossorigin  anonymous  gt  x000D   x000D   lt div class  container  gt  x000D     lt span id  breakpoint-js  gt  lt  span gt  x000D     lt div class  page-header  gt  x000D       lt h1 gt Bootstrap grid examples lt  h1 gt  x000D       lt p class  lead  gt Basic grid layouts to get you familiar with building within the Bootstrap grid system  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Building on Maciej Gurban s answer  which is fantastic    if you like this  please just up vote his answer   If you re building a service to query you can return the currently active service with the setup below  This could replace other breakpoint detection libraries entirely  like enquire js if you put in some events   Note that I ve added a container with an ID to the DOM elements to speed up DOM traversal   HTML   lt div id  detect-breakpoints  gt       lt div class  breakpoint device-xs visible-xs  gt  lt  div gt       lt div class  breakpoint device-sm visible-sm  gt  lt  div gt       lt div class  breakpoint device-md visible-md  gt  lt  div gt       lt div class  breakpoint device-lg visible-lg  gt  lt  div gt   lt  div gt    COFFEESCRIPT  AngularJS  but this is easily convertible     this simple service allows us to query for the currently active breakpoint of our responsive app myModule   angular module  module   factory  BreakpointService     log  - gt       alias could be  xs  sm  md  lg or any over breakpoint grid prefix from Bootstrap 3   isBreakpoint   alias  - gt      return     detect-breakpoints  device-    alias  is   visible        returns xs  sm  md  or lg   getBreakpoint  - gt      currentBreakpoint   undefined      visibleElement       detect-breakpoints  breakpoint visible       breakpointStringsArray      device-xs    xs      device-sm    sm      device-md    md      device-lg    lg          note     is the lodash library       each breakpointStringsArray   breakpoint  - gt        if  visibleElement hasClass breakpoint 0           currentBreakpoint   breakpoint 1      return currentBreakpoint   JAVASCRIPT  AngularJS   var myModule   myModule   angular module  modules   factory  BreakpointService   function  log      return       isBreakpoint  function alias          return     detect-breakpoints  device-    alias  is   visible               getBreakpoint  function           var  visibleElement  breakpointStringsArray  currentBreakpoint        currentBreakpoint   void 0         visibleElement       detect-breakpoints  breakpoint visible          breakpointStringsArray      device-xs    xs      device-sm    sm      device-md    md      device-lg    lg             each breakpointStringsArray  function breakpoint            if   visibleElement hasClass breakpoint 0                currentBreakpoint   breakpoint 1                             return currentBreakpoint

User · Answer

If you don t have specific needs you can just do this   if    window  width    lt  768           do something for small screens   else if    window  width    gt   768  amp  amp     window  width    lt   992           do something for medium screens   else if    window  width    gt  992  amp  amp     window  width    lt   1200           do something for big screens   else           do something for huge screens     Edit  I don t see why you should use another js library when you can do this just with jQuery already included in your Bootstrap project

User · Answer

You may want to add this to your bootstrap project to check active breakpoint visually       lt script type  text javascript  gt             document  ready function                   var mode                   lt div class  mode-informer label-info  style  z-index 1000 position  fixed bottom 10px left 10px  gt  mode  lt  div gt    appendTo  body                  var checkMode   function                       if    window  width    lt  768                        return  xs                                     else if    window  width    gt   768  amp  amp    window  width    lt  992                        return  sm                                     else if    window  width    gt   992  amp  amp    window  width    lt  1200                        return  md                                     else                       return  lg                                                 var compareMode   function                      if  mode     checkMode                          mode   checkMode                             mode-informer   text mode  animate                           bottom   100                         100  function                                  mode-informer   animate  bottom  10   100                                                                          window  on  resize   function                      compareMode                                compareMode                       lt  script gt    Here is the BOOTPLY

User · Answer

Have you taken a look at Response js  It s designed for this kind of thing  Combine Response band and Response resize   http   responsejs com   Response resize function         if   Response band 1200                    1200                else if   Response band 992                     992            else if   Response band 768                     768            else                   0- gt 768

User · Answer

Why not just use jQuery to detect the current css width of the bootstrap container class    ie     if  parseInt     container   css  width     gt  1200         do something for desktop screens     You could also use   window  resize   to prevent your layout from  soiling the bed  if someone resizes the browser window

User · Answer

Instead of inserting the below many times into each page      lt div class  device-xs visible-xs  gt  lt  div gt   lt div class  device-sm visible-sm  gt  lt  div gt   lt div class  device-md visible-md  gt  lt  div gt   lt div class  device-lg visible-lg  gt  lt  div gt    Just use JavaScript to dynamically insert it into every page  note that I have updated it to work with Bootstrap 3 with  visible- -block      Make it easy to detect screen sizes var bootstrapSizes     xs    sm    md    lg    for  var i   0  i  lt  bootstrapSizes length  i              lt div   gt              class   device-    bootstrapSizes i      visible-    bootstrapSizes i     -block         appendTo  body

User · Answer

I was not really satisfied with the given answers  which seem overly complicated to use to me  so I wrote my own solution  However  for the time being this relies on underscore lodash to work   https   github com LeShrimp GridSizeEvents  You can use it like this   GridSizeEvents addListener function  newSize  oldSize           Will output eg   xs - gt  sm      console log oldSize     - gt      newSize         This works out of the Box for Bootstrap 3  as the breakpoints are hard coded to 768px  992px and 1200px  For other versions you could easily adapt the code   Internally this uses matchMedia   and should thus guarantee to produce results that are in synch with Bootstrap

User · Answer

Here my own simple solution   jQuery   function getBootstrapBreakpoint        var w     document  innerWidth        return  w  lt  768     xs      w  lt  992     sm      w  lt  1200     md     lg         VanillaJS   function getBootstrapBreakpoint        var w   window innerWidth    document documentElement clientWidth    document body clientWidth      return  w  lt  768     xs      w  lt  992     sm      w  lt  1200     md     lg

User · Answer

Here is another way to detect the current viewport without putting the viewport size numbers in your javascript   See css and javascript snippets here   https   gist github com steveh80 288a9a8bd4c3de16d799  After adding that snippets to your css and javascript files you can detect the current viewport like this   viewport is  xs      returns boolean   If you want to detect a viewport range use it like this  viewport isEqualOrGreaterThan  sm      returns true for sm  md and lg

User · Answer

I ve made a native jQuery method for Twitter Bootstrap screen size detection  Here is      Screen size ID will be stored in this variable  global var for JS  var CurrentBootstrapScreenSize    unknown      document  ready function               lt div gt  objects for all screen sizes required for screen size detection         These  lt div gt  is hidden for users eyes      var currentScreenSizeDetectorObjects       lt div gt    css                position   absolute                top   -200px             addClass  current-screen-size   append                   lt div gt    addClass  device-xs visible-xs   html   amp nbsp                     lt div gt    addClass  device-sm visible-sm   html   amp nbsp                     lt div gt    addClass  device-md visible-md   html   amp nbsp                     lt div gt    addClass  device-lg visible-lg   html   amp nbsp                        Attach  lt div gt  objects to  lt body gt         body   prepend currentScreenSizeDetectorObjects           Core method for detector     function currentScreenSizeDetectorMethod               currentScreenSizeDetectorObjects  find  div   each function                 var className     this  attr  class                if   this  is   visible                      if String className  match  device-xs    CurrentBootstrapScreenSize    xs                   else if String className  match  device-sm    CurrentBootstrapScreenSize    sm                   else if String className  match  device-md    CurrentBootstrapScreenSize    md                   else if String className  match  device-lg    CurrentBootstrapScreenSize    lg                   else CurrentBootstrapScreenSize    unknown                                     console log  Current Bootstrap screen size is    CurrentBootstrapScreenSize               CurrentBootstrapScreenSize   first   html  Bootstrap current screen size   lt b gt     CurrentBootstrapScreenSize     lt  b gt                    Bind screen size and orientation change       window  bind  resize orientationchange   function                Execute screen detection         currentScreenSizeDetectorMethod                    Execute screen detection on page initialize     currentScreenSizeDetectorMethod           JSFillde  https   jsfiddle net pstepniewski 7dz6ubus   JSFillde as fullscreen example  https   jsfiddle net pstepniewski 7dz6ubus embedded result

User · Answer

It s been a while since the OP  but here s my solution for this using Bootstrap 3  In my use case  I was only targeting rows  but the same could be applied to the container  etc    Just change  row to whatever you want   jQuery document  ready function            var alterClass   function               var ww   document body clientWidth           if  ww  lt  768                     row   addClass  is-xs   removeClass  is-sm   removeClass  is-lg   removeClass  is-md               else if  ww  gt   768  amp  amp  ww  lt  992                     row   addClass  is-sm   removeClass  is-xs   removeClass  is-lg   removeClass  is-md               else if  ww  gt   992  amp  amp  ww  lt  1200                     row   addClass  is-md   removeClass  is-xs   removeClass  is-lg   removeClass  is-sm               else if  ww  gt   1200                     row   addClass  is-lg   removeClass  is-md   removeClass  is-sm   removeClass  is-xs                               Make Changes when the window is resized       window  resize function              alterClass                    Fire when the page first loads     alterClass

User · Answer

Here is good way to detect it  maybe funny  but works  and You can use necessary element so code is clear   Example  css    media  max-width  768px         someElement                background  pink           and in document by jQuery   if     someElement   css  background       pink         doWhatYouNeed        of course css property is any

User · Answer

For anyone interested in this  i wrote a breakpoint detection based on CSS breakpoints using TypeScript and Observables  it is not very hard to make ES6 out of it  if you remove the types  In my example i use Sass  but it is also easy to remove this   Here is my JSFiddle  https   jsfiddle net StefanJelner dorj184g   HTML    lt script src  https   cdnjs cloudflare com ajax libs rxjs 5 5 7 Rx min js  gt  lt  script gt   lt div id  result  gt  lt  div gt    SCSS   body  before     content   xs     display  none      media screen and  min-width  480px        content   s           media screen and  min-width  768px        content   m           media screen and  min-width  1024px        content   l           media screen and  min-width  1280px        content   xl           TypeScript   import   BehaviorSubject   from  rxjs BehaviorSubject   import   Observable   from  rxjs Observable    class BreakpointChangeService       private breakpointChange   BehaviorSubject lt string gt        constructor    BehaviorSubject lt string gt               initialize BehaviorSubject with the current content of the   before pseudo element         this breakpointChange    new Rx BehaviorSubject this getBreakpoint                 observe the window resize event  throttle it and combine it with the BehaviorSubject         Rx Observable              fromEvent window   resize                throttleTime 0  Rx Scheduler animationFrame               withLatestFrom this breakpointChange                subscribe this update bind this                      return this breakpointChange                 method to get the content of the   before pseudo element     private getBreakpoint    string              see https   www lullabot com articles importing-css-breakpoints-into-javascript         return window getComputedStyle document body    before   getPropertyValue  content   replace         g                  private update    recent   void           var current   this getBreakpoint            if recent     current    this breakpointChange  next current                 if the breakpoint changes  react on it var  result   document getElementById  result    new BreakpointChangeService   subscribe breakpoint   gt         result innerHTML   Date now        breakpoint        I hope this helps somebody

User · Answer

Since bootstrap 4 will be out soon I thought I would share a function that supports it  xl is now a thing  and performs minimal jQuery to get the job done          Get the Bootstrap device size     returns  string boolean  xs sm md lg xl on success  otherwise false if Bootstrap is not working or installed     function findBootstrapEnvironment         var environments     xs    sm    md    lg    xl        var  el       lt span   gt          el appendTo    body         for  var i   environments length - 1  i  gt   0  i--            var env   environments i            el addClass  hidden-  env           if   el is   hidden                   el remove                return env                       el remove        return false

User · Answer

There should be no problem with some manual implementation like the one mentioned by  oozic   Here are a couple of libs you could take a look at    Response js - jQuery plugin - make use of html data attributes and also has a js api  enquire js - enquire js is a lightweight  pure JavaScript library for responding to CSS media queries SimpleStateManager - s a javascript state manager for responsive websites  It is built to be light weight  has no dependencies    Note that these libs are designed to work independently of bootstrap  foundation  etc  You can configure your own breakpoints and have fun

User · Answer

Edit  This library is now available through Bower and NPM  See github repo for details   UPDATED ANSWER    Live example  CodePen Latest version  Github repository Don t like Bootstrap  Check  Foundation demo and Custom framework demos Have a problem  Open an issue   Disclaimer  I m the author   Here s a few things you can do using the latest version  Responsive Bootstrap Toolkit 2 5 0       Wrap everything in an IIFE  function    viewport           Executes only in XS breakpoint     if  viewport is  xs                                    Executes in SM  MD and LG breakpoints     if  viewport is   gt  sm                                    Executes in XS and SM breakpoints     if  viewport is   lt md                                    Execute only after document has fully loaded       document  ready function             if  viewport is  xs                                                    Execute code each time window size changes       window  resize          viewport changed function                 if  viewport is  xs                                                                   jQuery  ResponsiveBootstrapToolkit     As of version 2 3 0  you don t need the four  lt div gt  elements mentioned below     ORIGINAL ANSWER   I don t think you need any huge script or library for that  It s a fairly simple task    Insert the following elements just before  lt  body gt     lt div class  device-xs visible-xs  gt  lt  div gt   lt div class  device-sm visible-sm  gt  lt  div gt   lt div class  device-md visible-md  gt  lt  div gt   lt div class  device-lg visible-lg  gt  lt  div gt    These 4 divs allow you check for currently active breakpoint  For an easy JS detection  use the following function   function isBreakpoint  alias         return     device-    alias  is   visible        Now to perform a certain action only on the smallest breakpoint you could use   if  isBreakpoint  xs               someClass   css  property    value        Detecting changes after DOM ready is also fairly simple  All you need is a lightweight window resize listener like this one   var waitForFinalEvent   function            var b             return function  c  d  a            a     a    I am a banana             b a   amp  amp  clearTimeout b a            b a    setTimeout c  d                    var fullDateString   new Date      Once you re equipped with it  you can start listening for changes and execute breakpoint-specific functions like so     window  resize function          waitForFinalEvent function             if  isBreakpoint  xs                       someClass   css  property    value                      300  fullDateString getTime

User · Answer

If you use Knockout  then you could use the following custom binding to bind the current viewport breakpoint  xs  sm  md or lg  to an observable in your model  The binding      wraps the 4 divs with visible-   class in a div with id detect-viewport and adds it to the body if it doesn t exist already  so you could reuse this binding without duplicating these divs  sets the current viewport breakpoint to the bound observable by querying which of the divs is visible updates the current viewport breakpoint when the window is resized    x000D   x000D  ko bindingHandlers  viewport       x000D      init  function element  valueAccessor    x000D          if   document getElementById  detect-viewport      x000D              let detectViewportWrapper   document createElement  div    x000D              detectViewportWrapper id    detect-viewport   x000D               x000D                xs    sm    md    lg   forEach function breakpoint    x000D                  let breakpointDiv   document createElement  div    x000D                  breakpointDiv className    visible-    breakpoint  x000D                  detectViewportWrapper appendChild breakpointDiv   x000D                  x000D   x000D              document body appendChild detectViewportWrapper   x000D            x000D   x000D          let setCurrentBreakpoint   function     x000D              valueAccessor       detect-viewport div visible   0  className substring  visible-  length    x000D            x000D         x000D            window  resize setCurrentBreakpoint   x000D          setCurrentBreakpoint    x000D        x000D     x000D   x000D  ko applyBindings   x000D    currentViewPort  ko observable   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 4 2 knockout-min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div data-bind  viewport  currentViewPort  gt  lt  div gt  x000D   lt div gt      x000D      Current viewport breakpoint   lt strong data-bind  text  currentViewPort  gt  lt  strong gt  x000D   lt  div gt  x000D   lt div gt  x000D       Click the  lt em gt full page lt  em gt  link of this snippet to test the binding with different window sizes  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For anyone using knockout js  I wanted some knockout js observable properties that would tell me when the breakpoints are hit   I opted to use Modernizr s support for css-style media queries so the numbers matched the bootstrap definitions  and to get modernizr s compatibility benefits   My knockout view model is as follows   var viewModel   function            depends on jquery  Modernizr     var self   this      self widthXsOrLess   ko observable        self widthSmOrLess   ko observable        self widthMdOrLess   ko observable        var setWindowSizeVars   function             self widthXsOrLess  Modernizr mq   min-width  768px              self widthSmOrLess  Modernizr mq   min-width  992px              self widthMdOrLess  Modernizr mq   min-width  1200px                   window  resize setWindowSizeVars       setWindowSizeVars

User · Answer

Detect responsive breakpoint of Twitter Bootstrap 4 1 x using JavaScript  The Bootstrap v 4 0 0  and the latest version Bootstrap 4 1 x  introduced the updated grid options  so the old concept on detection may not directly be applied  see the migration instructions      Added a new sm grid tier below 768px for more granular control  We now have xs  sm  md  lg  and xl  xs grid classes have been modified to not require the infix    I written the small utility function that respects an updated grid class names and a new grid tier          Detect the current active responsive breakpoint in Bootstrap     returns  string      author farside   link https   stackoverflow com users 4354249 farside      function getResponsiveBreakpoint         var envs    xs  d-none   sm  d-sm-none   md  d-md-none   lg  d-lg-none   xl  d-xl-none        var env            var  el       lt div gt          el appendTo    body          for  var i   Object keys envs  length - 1  i  gt   0  i--            env   Object keys envs  i            el addClass envs env            if   el is   hidden                  break     env detected                      el remove        return env       Detect responsive breakpoint of Bootstrap v4-beta using JavaScript  The Bootstrap v4-alpha and Bootstrap v4-beta had different approach on grid breakpoints  so here s the legacy way of achieving the same           Detect and return the current active responsive breakpoint in Bootstrap     returns  string      author farside   link https   stackoverflow com users 4354249 farside      function getResponsiveBreakpoint         var envs     xs    sm    md    lg        var env            var  el       lt div gt          el appendTo    body          for  var i   envs length - 1  i  gt   0  i--            env   envs i            el addClass  d-    env    -none             if   el is   hidden                  break     env detected                      el remove        return env      I think it would be useful  as it s easy to integrate to any project  It uses native responsive display classes of the Bootstrap itself

User · Answer

Using this approach with Response js is better  Response resize triggers on every window resize where crossover will only be triggered if breakpoint is changed  Response create       prop    width       breakpoints    1200  992  768  480  320  0       Response crossover  width   function         if  Response band 1200                1200         else if  Response band 992                992         else if  Response band 768                768         else if  Response band 480               480         else              0- gt 320             Response ready function           window  trigger  resize

User · Answer

Instead of using   document  width    you should get set a CSS rule that gives you this information   I just wrote an article to get it accurately  See it here   http   www xurei-design be 2013 10 how-to-accurately-detect-responsive-breakpoints

[javascript] How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Examples related to javascript

Examples related to twitter-bootstrap-3

Examples related to dom-events