Bootstrap labels and Android tablets

Bootstrap 3 is a terrific framework for developing a responsive, mobile-first layout. I’ve used it with great success. However, as new browsers and devices come to market, I’ve had to go into the plumbing of some of the core Bootstrap components to resolve some sticky issues. One of the more challenging issues was trying to figure out why the seemingly basic Bootstrap label would not appear in Android tablet browsers. What was perplexing was that upon page load, labels would not show, but when the device was rotated to landscape (or portrait – the starting orientation didn’t matter) – the label would show.

Here’s the solution using the Bootstrap LESS CSS distribution. Drill down into the less > bootstrap > less > labels.less file and find this code:

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

It looks like Android tablets don’t respect empty labels and invoke display:none on all initial page loads. Changing the above lines to:

  // Empty labels collapse automatically (not available in IE8)
  //&:empty {
  //  display: none;
  //}

solved the problem. I’ve back-tested with a number of browser flavors and this change did not have any noticeable change in label behavior. Remember, with LESS you will need to recompile your CSS and do a hard refresh in your browser as many are apt to cache CSS.