Toggle Bootstrap Tabs to Dropdown in Mobile view

Question

I have a website developing with Bootsrtap 3, I have tab element there. I have to make tabbed items as drop downs when browsing from mobile deveice. Is it possible?

<!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
      <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">A</div>
      <div class="tab-pane fade" id="profile">B</div>
      <div class="tab-pane fade" id="messages">C</div>
      <div class="tab-pane fade" id="settings">D</div>
    </div>

I am using the basic Tabs with the bootstrap.

Bicuspid

no, this is not available in bootstrap. you have to make your own custom dropdown yourself. You can do it easily with css. change the css style for mobile devices/ – Tade

Answer 1

The following css applies a basic design to the tabs for devices where device-width >=480px. You can change this limit width for higher phone resolution :

@media screen and (max-width: 480px) {
    .nav {
        padding-left:2px;
        padding-right:2px;
    }
    .nav li {
        display:block !important;
        width:100%;
        margin:0px;
    }
    .nav li.active {
        border-bottom:1px solid #ddd!important;
        margin: 0px;
    }
}

http://jsfiddle.net/e7mzx24v/

Hope it helps

Stollings

Answer 2

I came here by mistake, but having had a look at the answers, and seen that many people are looking for it, I have posted this answer. There is, in fact, an easy way to do all that.

You can use the bootstrap native classes 'visible-xs' and 'hidden-xs', this will automatically hide or show one of the two controls depending with which device the users are opening the page.

An example is given here:

<div class="tabbable">
    <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs">
       <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
       <li class="tab-selector"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
       <li class="tab-selector"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
       <li class="tab-selector"><a href="#tab4" data-toggle="tab">Tab 4</a></li>
       <li class="tab-selector"><a href="#tab5" data-toggle="tab">Tab 5</a></li>
    </ul>
    <select class="mb10 form-control visible-xs" id="tab_selector">
        <option value="0">Tab 1</option>
        <option value="1">Tab 2</option>
        <option value="2">Tab 3</option>
        <option value="3">Tab 4</option>
        <option value="4">Tab 5</option>
    </select>
    <div class="tab-content">
       <div class="tab-pane active" id="tab1">
            Content tab 1
       </div>
       <div class="tab-pane" id="tab2">
            Content tab 2
       </div>
       <div class="tab-pane" id="tab3">
            Content tab 3
       </div>
       <div class="tab-pane" id="tab4">
            Content tab 4
       </div>
       <div class="tab-pane" id="tab5">
            Content tab 5
       </div>
    </div>
</div>

Place this javascript snippet in the document ready function" and put it at the end of </body> tag and well in the </body> tag and NOT outside of it. Of course you must have jQuery up and running.

$(document).ready(function() {
    $('#tab_selector').on('change', function (e) {
        $('.form-tabs li a').eq($(this).val()).tab('show');
    });
});

A working demo can be found here: https://jsfiddle.net/fr0w59n9/

Seton

It will not maintain the coherency between the ul and select. For instance if we select Tab-2 in desktop mode and then shift to mobile view it will change the content to Tab-content-2 but the dropdown selected item will still be Tab-1. It should be a two way system – Inimitable