jQuery detect Bootstrap 3 state

Question

In Bootstrap 3, there are 4 states; extra small devices, small devices, medium devices, and large devices. How can I know the website is currently at which state with jQuery? So that I can do some processing like when it is in extra small devices, then run this function.

Thanks.

http://stackoverflow.com/questions/9477028/how-to-programmatically-find-the-device-width-in-phonegap-jquery-mobile — Khurshid, Oct 19 '13 at 05:24
Thanks. I mean is there any direct access to know from bootstrap instead of detect the width directly? — user1995781, Oct 19 '13 at 05:27

awj · Answer 1 · 2014-07-23T08:07:50.680

13

Following @Khurshid's answer (which works perfectly well) I've written a native JavaScript implementation which is significantly faster:

function findBootstrapEnvironment() {
    var envs = ["xs", "sm", "md", "lg"],    
        doc = window.document,
        temp = doc.createElement("div");

    doc.body.appendChild(temp);

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        temp.className = "hidden-" + env;

        if (temp.offsetParent === null) {
            doc.body.removeChild(temp);
            return env;
        }
    }
    return "";
}

edited Jul 23 '14 at 08:07

answered Jul 22 '14 at 10:15

awj

7,482
10
66
120

I have to admit that I generally dismissed replacing simply jQuery calls with native as an unnecessary micro-optimization. Definitely didn't anticipate this comparison would show a 90+% difference in performance. – Scott Smith Jun 17 '15 at 19:36
Work great, but on IE it seems to always return "xs" :S – Simon Arnold Aug 20 '15 at 15:10
For IE support, I used `if($(this.dom.temp).is(':hidden')) { $(this.dom.temp).remove(); return env; }` instead of `if (temp.offsetParent === null) { doc.body.removeChild(temp); return env; }` – Simon Arnold Aug 20 '15 at 15:24
1

To make this code Bootstrap v4 compatible, add "xl" to the 'envs' array and change `temp.className = "hidden-" + env;` to `temp.className = "hidden-" + env + "-up";` – dburdan Sep 10 '15 at 17:57
1

@dburdan Without sounding lazy, I'm quite happy for you to edit my solution and attach your name to it. – awj Sep 11 '15 at 12:47

score 12 · Accepted Answer · edited May 23 '17 at 12:24

12

I made some changes to this for bootstrap 3, try this"

function findBootstrapEnvironment() {
    var envs = ["ExtraSmall", "Small", "Medium", "Large"];
    var envValues = ["xs", "sm", "md", "lg"];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envValues.length - 1; i >= 0; i--) {
        var envVal = envValues[i];

        $el.addClass('hidden-'+envVal);
        if ($el.is(':hidden')) {
            $el.remove();
            return envs[i]
        }
    };
}

edited May 23 '17 at 12:24

Community

1
1

answered Oct 19 '13 at 05:48

Khurshid

954
7
19

1

You should declare the `$el` and not pollute the global scope. – carter May 17 '14 at 17:00

score 6 · Answer 3 · answered Oct 19 '13 at 05:27

6

I had to do something similiar for the medium size.

The media query for the extra small is up to 480px;

so you can say something like:

if($(document).width > 480)
{

  //Do Something
}

answered Oct 19 '13 at 05:27

w3bMak3r

882
8
13

2

This is by far the best and to the point solution I have come across. The main reason for this is nobody except a developer is going to switch browser width to test responsive behavior! A site user will use one device at a time, either a desktop or a tablet or a handheld. I presume this solution was suggested keeping above in mind! – Subrata Sarkar Jun 11 '16 at 04:27
2

You will still get users changing the browser side, eg dragging it to a second screen or changing its size so they can see windows underneath and other user cases.. But its a simple example which simply reminds people.. Check the width.. – Angry 84 Sep 07 '16 at 02:57
1

Great answer! Thank you. – user2502479 Dec 30 '16 at 21:54

score 0 · Answer 4 · answered Jun 05 '18 at 15:32

Bootstrap 4 version:

function findBootstrapEnvironment() {
    var envs = ["sm", "md", "lg", "xl"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));
    $el.addClass("d-block");
    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return "xs";    //extra small
}

jQuery detect Bootstrap 3 state

4 Answers4

Linked