61

I have just started to play around with Twitter Bootstrap API for a project I have coming up. The main nav contains 3 main elements:

  • site nav
  • social links nav
  • search the site form

I am using the collapse plugin to collapse the site nav and search form when viewing the site on mobile devices. The mobile view has 2 buttons which when clicked toggle the search form or main nav on/off.

However if I toggle off the search form and then resize my browser to desktop view the search form is still hidden in this view?

I have read about using classes such as visible-mobile etc but these seem to clash with the collapse plugin. I also realise I could probably write my own CSS hacks to fix this but thought I'd ask if there was an easier solution.

Bootstrap has events for show, shown, hide and hidden so I thought maybe I could write some custom JS which would show or hide these items in each particular device view. However I didn't know how to detect which device I'm using at the time.

Thoughts?

1
  • You might also want to use this tiny snippet, which displays the current device type directly at the top of your page.
    – SunnyRed
    Nov 5, 2014 at 14:29

7 Answers 7

162
+50

If you want to know what environment you're on, try using Bootstrap's own CSS classes. Create an element, add it to the page, apply its helper classes and check if it's hidden to determine if that's the current environment. The following function does just that:

Bootstrap 4

function findBootstrapEnvironment() {
    let envs = ['xs', 'sm', 'md', 'lg', 'xl'];

    let el = document.createElement('div');
    document.body.appendChild(el);

    let curEnv = envs.shift();

    for (let env of envs.reverse()) {
        el.classList.add(`d-${env}-none`);

        if (window.getComputedStyle(el).display === 'none') {
            curEnv = env;
            break;
        }
    }

    document.body.removeChild(el);
    return curEnv;
}

Bootstrap 3

function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

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

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

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Bootstrap 2

function findBootstrapEnvironment() {
    var envs = ['phone', 'tablet', 'desktop'];

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

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

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}
12
  • Is there any Javascript API to get this detail apart from checking the markup dynamically? Nov 7, 2013 at 7:25
  • Seems to be not working, always returning undefined, as per Bootstrap 3.0, use this array: ["xs", "sm", "md", "lg"] Nov 8, 2013 at 20:21
  • 2
    @EaswaramoorthyKanagaraj, I believe the best, when considering CSS equivalency, would be window.matchMedia, but it's not widely supported yet.
    – rmobis
    Nov 8, 2013 at 20:27
  • 2
    @Davincho That requires you to manually include specific markup on every page you want to use that and it surely doesn't look like a good trade-off.
    – rmobis
    Apr 1, 2015 at 13:44
  • 1
    @vandenn3 it would be easier, just not as accurate. Both $('body').width() and window.document.body.clientWidth don't take the scrollbar width in consideration while the media query does. You could argue that the fix is as simple as adding the scrollbar width but different browsers on different OSes have different scrollbar widths. Also, this way you don't have to rely on your the default breakpoints and it will work even if you've change them.
    – rmobis
    Aug 21, 2016 at 21:09
43

Building on @Raphael_ and @user568109 's answers, in Bootstrap 3, Responsive is now built in.

To detect device type in Javascript, create an object that is only displayed on your required device using Bootstrap's Responsive classes. Then check its :hidden property.

Example:

  1. Create a <div> panel with no content that would be shown on anything bigger that an eXtra Small device (thanks to @Mario Awad) :

    <div id="desktopTest" class="hidden-xs"></div>
    

    or, to exclude specific devices:

    <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
    
  2. Check value of #desktopTest:

    if ($('#desktopTest').is(':hidden')) {
        // device is == eXtra Small
    } else {
        // device is >= SMaller 
    }
    
6
  • 2
    Great answer for Bootstrap 3. Tiny improvement: Replace the class with this: class="hidden-xs". Does the same thing as yours but is shorter and more human readable. Cheers.
    – Mario Awad
    Oct 18, 2013 at 16:14
  • Thanks @MarioAwad, I've updated my answer to include your recommendation Oct 19, 2013 at 17:16
  • Is there any Javascript API to get this detail apart from checking the markup dynamically? Nov 7, 2013 at 7:25
  • @EaswaramoorthyKanagaraj, I'm not aware of one. You could add the div dynamically in Javascript then check on its visibility Nov 7, 2013 at 9:29
  • @AlastairMcCormack Thanks for the reply. But this look kind of hack, not direct way... Nov 7, 2013 at 9:57
6

I originally posted answer here, the solution for Bootstrap v.4.x.

JS breakpoint detection for Twitter Bootstrap 4.1.x

The Bootstrap v.4.0.0 (and the latest version Bootstrap 4.1.x) introduced the updated grid options, so the old concept on detection may not directly be applied (see the migration instructions):

  • Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl;
  • xs grid classes have been modified to not require the infix.

I written the small utility function that respects an updated grid class names and a new grid tier:

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

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

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
};

JS breakpoint detection for Bootstrap v4-beta

The latest Bootstrap v4-alpha and Bootstrap v4-beta had different approach on grid breakpoints, so here's the legacy way of achieving the same:

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

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

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

I think it would be useful, as it's easy to integrate to any project. It uses native responsive display classes of the Bootstrap itself.

3
  • 1
    Bootstrap 4 beta has changed the classes - they use d-*-none instead of hidden-*-up. Here's a version that works for Bootstrap 4 beta - gist.github.com/gurubobnz/115d6fb64eb59c6f057a09fd53c721c0
    – GuruBob
    Nov 23, 2017 at 22:00
  • 1
    thanks, @GuruBob, I updated the answer! the answer originally was created when just 4-alpha was in place ;)
    – Farside
    Nov 23, 2017 at 22:48
  • absolutely wonderful. Excellent implementation. Thank you from YouDoer.com :)
    – Andy
    Dec 28, 2018 at 0:40
6

Original answer:
Based on @Alastair McCormack answer, I suggest you to use this code

<div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div>

Just add it in the end of your container div, you will get a simple dynamic information about current view.

Update (2019-03-03):
Previous code is not compatible with Bootstrap 4, since all hidden-* and visible-* classes have been removed. Here you have the new code you can use, compatible with both Bootstrap 3 and Bootstrap 4 versions (some credits goes to this SO answer):

<div class="visible-xs hidden-sm hidden-md hidden-lg hidden-xl d-block d-sm-none">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg hidden-xl d-none d-sm-block d-md-none">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg hidden-xl d-none d-md-block d-lg-none">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg hidden-xl d-none d-lg-block d-xl-none">lg</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg visible-xl d-none d-xl-block">xl</div>

You can test it with this fiddle.

Please note that I included hidden-xl and visible-xl too, but I believe they are not really used by any Bootstrap version.

3
  • Super simple. I like this. Mar 16, 2017 at 4:29
  • Yes, that's the idea. The OP asked "how to detect which device I'm using at the time", and I believe this is a quick and effective solution. I always use this, and comment it out (or wrap it in a hidden div) when I need to debug my code.
    – Kar.ma
    Mar 17, 2017 at 8:25
  • You are right: original visible and hidden classes have been removed in Boostrap 4. I updated the answer.
    – Kar.ma
    Mar 3, 2019 at 10:56
3

My answer is using similar mechanism like the one presented by @Raphael_ however, you can do a little bit more with it. Please refer to this answer for details and project's github repository for the most updated version.

Example of breakpoint detection:

if ( viewport.is('xs') ) {
  // do stuff in the lowest resolution
}

Executing code on window resize (without it happening multiple times within a span of milliseconds):

$(window).bind('resize', function() {
    viewport.changed(function() {

      // do some other stuff!

    })
});
0

Niche case, but you can apply @Kar.ma's to a Mediawiki with Chameleon (bootstrap skin) installed. Pass the "results" of the DIV as a template argument, then test against that within the template.

-1

Combining the answers from above, this one works for me:

function findBootstrapDeviceSize() {
  var dsize = ['lg', 'md', 'sm', 'xs'];
  for (var i = dsize.length - 1; i >= 0; i--) {

    // Need to add &nbsp; for Chrome. Works fine in Firefox/Safari/Opera without it.
    // Chrome seem to have an issue with empty div's
    $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
    $el.appendTo($('body'));

    if ($el.is(':hidden')) {
      $el.remove();
      return dsize[i];
    }
  }

  return 'unknown';
}
1
  • Not working. Returns 'xs' on both my chrome laptop and my phone. Mar 15, 2014 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.