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

The best way to do this, and even without worrying if bootstrap might change the device widths in the future, is by adding 4 divs to your body and checking which one is visible. This works in Bootstrap 3 and 4!

Your HTML would look like this (add this somewhere in your document's body):

<div class='device-check visible-xs' data-device='xs'></div>
<div class='device-check visible-sm' data-device='sm'></div>
<div class='device-check visible-md' data-device='md'></div>
<div class='device-check visible-lg' data-device='lg'></div>

you can then find the current grid option with:

function get_current_grid_option(){
    return $('.device-check:visible').attr('data-device')
}

this will return xs, sm, md or lg