How to detect which device view you're on using Twitter Bootstrap API?

Question

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?

Thanks in advance

Answer 1

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

Answer 2

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  }