How to determine which grid option is currently used

Question

I use Bootstrap 3 for a web page that is created using PHP and HTML.

With the responsive grid and classes on Bootstrap 3 you can assign multiple classes to a div to define different widths depending on the current screen size - exmaple:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">...</div>

This refers to the screen size using col-lg for large devices, col-md for medium devices, col-sm for small devicesand col-xs for extra small devices.
It works as intended but I am wondering how I can determine which of these classes Bootstrap is using at the moment so that I can show the current size version on the screen.

Is there a way I can determine which of the above grid options / col classes is currently active using PHP (or jQuery)? I could not find a proper solution for this myself.

Answer 1

here is a simple test you can try to show what classes bootstrap is using when re-sizing to a certain size.

The width is taken from the current window, and the conditions or screen sizes are from BOOTSTRAP, do not rely on this since this is not accurate maybe more or less 3px.

You can further improve this to your liking.

$(document).ready(function(){
    $(window).on('resize',function(){
       var winWidth =  $(window).width();
       if(winWidth < 768 ){
          console.log('Window Width: '+ winWidth + 'class used: col-xs');
       }else if( winWidth <= 991){
          console.log('Window Width: '+ winWidth + 'class used: col-sm');
       }else if( winWidth <= 1199){
          console.log('Window Width: '+ winWidth + 'class used: col-md');
       }else{
          console.log('Window Width: '+ winWidth + 'class used: col-lg');
       }
    });
});