Modifying BootStrap Tab Control for Extra Small Device<!-- --> | <!-- -->Patrick Desjardins Blog
Patrick Desjardins Blog
Patrick Desjardins picture from a conference

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). BootStrapTab 400x180

1/*For smaller device, tab control should not appear*/ @media (max-width: 767px) { .nav-tabs > li { float:none; border:1px solid #dddddd; } .nav-tabs > li.active > a{ border:none; } .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; } }

BootStrapTabFixed 400x262

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