bootstrap tab as tab for mobile

Question

I'm designing a bootstrap tab for mobile. But the problem is, while in a desktop browser, the tabs are ok, but when it changes to mobile screen size, the tabs come one under the other. It automatically adjusts due to the responsiveness. But I want it responsive yet to be in a tab form in the mobile as well.

The html is:

<section class="panel">
                <header class="panel-heading bg-light">
                  <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  </ul>
                </header>
                <div class="panel-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="home">home</div>
                    <div class="tab-pane" id="profile">profile</div>
                    <div class="tab-pane" id="messages">message</div>
                  </div>
                </div>
              </section>

Here is the fiddle at http://jsfiddle.net/LdWUV/

How can I achieve this?

Answer 1

There is nothing you can do right now, but write your own javascript or serverside code. This issue was discussed a lot of times on GitHub 9048 , 10688 , 7540 (just for example), but bootstrap team won't hear to anyone and don't want to do anything with tab plugin. I recommend you to open new issues on GitHub to bring more attention to this problem.

Answer 2

This is what I'm doing:

@media only screen and (max-width: 767px) 
{
    .nav-tabs li
    {
        width:100%!important;
    }
    .tab-content .tab-pane
    {
       display:block!important; 
    }
}

If you don't want all the tab-panes to be visible on mobile, just get rid of the tab-pane css in the second block. I also included some headers that are only visible on xs that make the blocks more distinguishable. This pretty much creates tab titles that act as anchor links to the content on mobile.