Modifying BootStrap Tab Control for Extra Small Device

If you are using BootStrap and the Tab control you may have a weird rendering for Extra Small Device (under 768 pixel).
BootStrapTab
To fix this, it is possible for you to add this code. It removes the borders and remove the background.

/*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

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

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

2 thoughts on “Modifying BootStrap Tab Control for Extra Small Device

  1. Pingback: Create Responsive Tabs using Bootstrap (They should get stacked automatically on smaller screens) – inneka.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.