Create Responsive Tabs using Bootstrap (They should get stacked automatically on smaller screens)

Question

How can I create responsive tabs which get stacked automatically using bootstrap. The code for my navs is -

Answer 1

With BootStrap version 3, 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 background and border.

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #ffffdffffd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .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;
    }
}