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');
       }
    });
});

Answer 2

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

Answer 3

Extract of the doc : http://getbootstrap.com/css/#grid

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

Copy

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

• Extra small devices Phones (<768px)
• Small devices Tablets (≥768px)
• Medium devices Desktops (≥992px)
• Large devices Desktops (≥1200px)

Answer 4

In case someone else lands on this post looking for a Bootstrap 4 answer, I ended up creating this snippet of HTML, which shows the appropriate sizing div using the BS responsive utilities.

I added a bit of inline styling to make it easier to paste in the snippet, but the styles could be moved to a stylesheet.

<div class="d-none d-xl-block" style="background: #007bff; color: #fff; padding: 5px; text-align: center;">XL</div>
<div class="d-none d-lg-block d-xl-none" style="background: #27a745; color: #fff; padding: 5px; text-align: center;">LG</div>
<div class="d-none d-md-block d-lg-none" style="background: #ffc108; color: #fff; padding: 5px; text-align: center;">MD</div>
<div class="d-none d-sm-block d-md-none" style="background: #18a2b8; color: #fff; padding: 5px; text-align: center;">SM</div>
<div class="d-block d-sm-none" style="background: #dc3545; color: #fff; padding: 5px; text-align: center;">XS</div>

Here's more information on the Bootstrap 4 display utilities used.

Answer 5

Recently this is suggested by the documentation (in Hiding elements section):

<div class='d-block d-sm-none          ' data-device='xs'>xs</div>
<div class='d-none d-sm-block d-md-none' data-device='sm'>sm</div>
<div class='d-none d-md-block d-lg-none' data-device='md'>md</div>
<div class='d-none d-lg-block d-xl-none' data-device='lg'>lg</div>
<div class='d-none d-xl-block          ' data-device='xl'>xl</div>

Answer 6

With this small snippet you can see the current device type (Mobile, Tablet, Desktop, Large) directly add the top of the body. Have Fun.

var refreshDeviceInfo = function () {
    var id = 'deviceInfo',
        type = "Mobile",
        widthType = 'innerWidth',
        container = document.getElementById(id),
        width;

    if (!('innerWidth' in window )) {
        widthType = 'clientWidth';
        window = document.documentElement || document.body;
    }
    width = window[widthType];

    // check, if our info container is already in place,
    // if not prepend it to the body
    if (!container) {
        container = document.createElement('div');
        container.setAttribute("id", id);
        container.setAttribute("style", "padding:20px; text-align:center; background:#eee");
        document.body.insertBefore(container, document.body.firstChild);
    }

    if (width >= 1200) {
        type = "Large";
    }
    else if (width >= 992) {
        type = "Desktop";
    }
    else if (width >= 768) {
        type = "Tablet";
    }
    container.innerHTML = type;
};

// refresh on resize
if ( window.addEventListener ) {
    window.addEventListener( "resize", refreshDeviceInfo, false );
} else if ( window.attachEvent ) {
    window.attachEvent( "onresize", refreshDeviceInfo );
} else {
    window["onresize"] = refreshDeviceInfo;
}

// initial refresh
refreshDeviceInfo();

Answer 7

Modified the answer from SunnyRed.

Displaying current Bootstrap 3 layout

• Does not rely on jQuery, as the accepted answer.
• Shows the layout info always in the right/bottom corner of the window, above other content.
• Does not modify page itself.
• Waits for document ready before first execution, thus delivers correct result right from the start.

Add this before your body tag:

    <script>
        function refreshDeviceInfo() {
            var id = 'deviceInfo',
                type = "Mobile (xs)",
                widthType = 'innerWidth',
                container = document.getElementById(id),
                width;

            if (!('innerWidth' in window )) {
                widthType = 'clientWidth';
                window = document.documentElement || document.body;
            }
            width = window[widthType];

            if (!container) {
                container = document.createElement('div');
                container.setAttribute("id", id);
                container.setAttribute("style", "position:fixed; right:0px; bottom: 0px; padding:10px; z-index:9999;background:rgba(0,255,0,0.6)");
                document.body.insertBefore(container, document.body.firstChild);
            }

            if (width >= 1200) {
                type = "Large Desktop (lg)";
            } else if (width >= 992) {
                type = "Medium Desktop (md)";
            } else if (width >= 768) {
                type = "Tablet (sm)";
            }
            container.innerHTML = type;
        };

        // refresh on resize
        if ( window.addEventListener ) {
            window.addEventListener( "resize", refreshDeviceInfo, false );
        } else if ( window.attachEvent ) {
            window.attachEvent( "onresize", refreshDeviceInfo );
        } else {
            window["onresize"] = refreshDeviceInfo;
        }
        document.addEventListener("DOMContentLoaded", function(event) {
            refreshDeviceInfo();
        });
    </script>