Jquery Detect Bootstrap 3 State

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 th

Solution 1:

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

functionfindBootstrapEnvironment() {
    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]
        }
    };
}

Solution 2:

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

functionfindBootstrapEnvironment() {
    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"";
}

Solution 3:

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
}

Solution 4:

Bootstrap 4 version:

functionfindBootstrapEnvironment() {
    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
}