Kshitiz Shankar Kshitiz Shankar - 4 months ago 13
Javascript Question

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

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

<div>
<ul id="tabslist_navs" class="nav nav-tabs">
<li><a href="#">Normal</a></li>
<li><a href="#">Hover</a></li>
<li><a href="#">Selected</a></li>
</ul>
<div class="tab-content">
....
</div>
</div>


I need them to get converted to stacked tabs when viewed on small screens.
Right now it just moves the tabs into multiple likes which looks ugly.
I want something like the navbar collapse but without the button to activate the collapse.

Answer

This should work:

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}