Home » Web » CSS » Modifying BootStrap Tab Control for Extra Small Device

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 Responses so far.

  1. Nhu Dinh Quoc Phuong says:

    Thanks, this did help me

  2. […] you have everything stacked in a clean vertical way for Extra Small Device by adding 4 CSS classes. BootStrap and Tab does not render greatly as you have noticed. The code below can do the job by removing all […]

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.