Modifying BootStrap Tab Control for Extra Small Device

Posted on: March 27, 2014

If you are using BootStrap and the Tab control you may have a weird rendering for Extra Small Device (under 768 pixel).

1/*For smaller device, tab control should not appear*/ 
2 @media (max-width: 767px) { 
3  .nav-tabs > li { 
4    float:none; border:1px solid #dddddd; 
5  } 
6  .nav-tabs > li.active > a{ border:none; } 
7  .nav > li > a:hover, .nav > li > a:focus, .nav > li > a:hover, .nav > li > a:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background:none; border:none; } 
8}

The end result is much better than the default behavior and the solution is simple and clean. I hope that it helps someone.