1

I am trying to detect the bootstrap size (xs/sm/md/lg).

I have tried those links:

Unfortunately,

The answers I have found have "bug" or something like that.

If you log the bootstrap size on window resize event, you would see that you log undefined sometimes.

It happens when you resize the window from bootstrap size one to bootstrap size two.

For example, when you resize from xs to sm.

Community
  • 1
  • 1
Maor Cohen
  • 936
  • 2
  • 18
  • 33
  • since without a customization of bootstrap the sizes are always the same and there are only four, a finite number, would hard coding the values in a switch case based on the bootstrap size not be an option? – WEBjuju Nov 25 '16 at 08:11
  • something like: if (window.innerWidth < 768) { return 'xs'; } else if (window.innerWidth < 992) { return 'sm'; } else if (window.innerWidth < 1200) { return 'md'; } else { return 'lg'; } ? – Maor Cohen Nov 25 '16 at 08:13
  • maybe i'm not understanding what you are trying to do. are you the coder of the codepen you shared and trying to expand it to not only show the xs/sm/md/lg but also the max width? if not, are you just building your own page that you need to know the current bootstrap size of? if the latter, what does the max pixel width have to do with it? – WEBjuju Nov 25 '16 at 08:19
  • 1
    okay, gotta sign out - i'll check in on you tomorrow, my friend – WEBjuju Nov 25 '16 at 08:29
  • Sorry, I want to detect what is the bootstrap size of the window: xs/sm/md/lg. Unfortunately, the answers I have found have "bug" or something like that. If you log the bootstrap size on window resize event, you would see that you log undefined sometimes. It happens when you resize the window from bootstrap size one to bootstrap size two. For example, when you resize from xs to sm. (I didn't write the code in codepen). – Maor Cohen Nov 25 '16 at 09:40

1 Answers1

0

If you include this library you can run a function like this:

<script>
(function($, document, window, viewport){

  // Executes once whole document has been loaded
  $(document).ready(function() {
    console.log('Current breakpoint:', viewport.current());
  });

  $(window).resize(
    viewport.changed(function(){
      console.log('Current breakpoint:', viewport.current());
    })
  );

})(jQuery, document, window, ResponsiveBootstrapToolkit);
</script>

The problem seems to be that the documentation isn't clear enough about scoping ResponsiveBootstrapToolkit to viewport as seen above.

WEBjuju
  • 5,797
  • 4
  • 27
  • 36
  • It doesn't work. If you log the bootstrap size (xs/sm/md/lg) on window resize event, you would see that you log undefined sometimes. It happens when you resize the window from bootstrap size one to bootstrap size two. For example, when you resize from xs to sm. – Maor Cohen Nov 25 '16 at 09:42
  • okay, i have reproduced your issue locally; you may take the js within the – WEBjuju Nov 25 '16 at 15:35