It should work without overriding the `overflow` property of `.tab content`.  The only other thing I noticed is that you're initializing tabs for the class `tabs-student`, but that class doesn't exist in your markup.  I think that's probably what you intended in the `ul` element with `.tabs-s`.  When I changed that, everything works just fine.

[See this jsFiddle][fiddle]
====

This **JavaScript**:



    $('.tabs-student a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

Should correspond to this **HTML**:



    <ul class="nav nav-tabs tabs-student">
      <li class="active"><a href="#tab-activity">Activity</a></li>
      <li class=""><a href="#tab-sales">Sales</a></li>
    </ul>

Should look like this:

![demo][demo]

[fiddle]: http://jsfiddle.net/KyleMit/aAqsX/
[demo]: http://i.imgur.com/ftuMXC9.png

I have `tabs`, where I put a `dropdown` element inside. The problem is, the dropdown list is not visible. Open/close event is working, but I don't see the list. If i move the dropdown outside the tabs, it is working. What's going on ?

**JavaScript**



    $(document).ready(function () {
        $('.tabs-student a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });

**HTML**



    <ul class="nav nav-tabs tabs-s">
      <li class="active"><a href="#tab-activity">A</a></li>
      <li class=""><a href="#tab-sales">B</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab-activity">
          <div class="btn-group left">
              <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">test1
                  <span class="caret caret-fix"></span>
               </button>
               <ul class="dropdown-menu class-list scrollable-menu center">
                  <li><label id="1" class="link active">test1</label></li>
                  <li><label id="2" class="link">test2</label></li>
               </ul>
           </div>
      </div>
      <div class="tab-pane" id="tab-sales">
         test
      </div>
    </div>

Bootstrap dropdown inside tabs is not visible

That's because `#home3-2` is nested within a tab that is hidden.

Another way to look at this is what would happen for the following code?:

    <div> 1
        <div style="display:none"> 2
            <div style="display:block"> 3 </div>
        </div>
    </div>

Even though you have made the bottom div visible, it will still be hidden by its parent.

When loading the page, you'll have to traverse the dom for any hidden parent tabs and call `show` on them as well.

    if (location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
        // code to also show parent tabs
    }

You could do that like this:


    //get the hashed element and find all of it's parent tabs that aren't active
    $(location.hash).parents('.tab-pane:not(.active)').each(function() {
        //each pane should have an id - find it's anchor target and call show
        $('a[href=#' + this.id + ']').tab('show');
    });

Demo in fiddle:

http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2

I have a structure of tabs with 3 levels:

    
    <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>
    </ul>    
    
    <div class="tab-content">
      <div class="tab-pane active" id="home">      	
        <p>Home content.</p>      
      	
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home2" role="tab" data-toggle="tab">Home 2</a></li>
          <li><a href="#profile2" role="tab" data-toggle="tab">Profile 2</a></li>
        </ul>    
        
        <div class="tab-content">
          <div class="tab-pane active" id="home2">          
          <p>Home 2 content.</p>              
          
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home3-1" role="tab" data-toggle="tab">Home 3-1</a></li>
          <li><a href="#profile3-1" role="tab" data-toggle="tab">Profile 3-1</a></li> 
        </ul>    
        
        <div class="tab-content">
          <div class="tab-pane active" id="home3-1"><p>Home 3-1 content.</p></div>
          <div class="tab-pane" id="profile3-1"><p>Profile 3-1 content.</p></div>
        </div>          
          </div>
          <div class="tab-pane" id="profile2">
          <p>Profile 2 content.</p>         
          
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home3-2" role="tab" data-toggle="tab">Home 3-2</a></li>
          <li><a href="#profile3-2" role="tab" data-toggle="tab">Profile 3-2</a></li> 
        </ul>
          
        <div class="tab-content">
          <div class="tab-pane active" id="home3-2"><p>Home 3-2 content.</p></div>
          <div class="tab-pane" id="profile3-2"><p>Profile 3-2 content.</p></div>
        </div>           
          </div>
        </div>         
      </div>
      <div class="tab-pane" id="profile">Profile content.</div>
    </div>

This code could be checked here: ([http://jsfiddle.net/bvta2/3/][1]).

When you access the link [http://fiddle.jshell.net/bvta2/3/show/#profile3-1][2], the Profile 3-1 tab appears active. However, when accessing [http://fiddle.jshell.net/bvta2/3/show/#home3-2][3], for example, the Home 3-2 tab is not active.

How can I solve this using jQuery? Thanks!


  [1]: http://jsfiddle.net/bvta2/3/
  [2]: http://fiddle.jshell.net/bvta2/3/show/#profile3-1
  [3]: http://fiddle.jshell.net/bvta2/3/show/#home3-2

Activate the tab of the location hash

You could add the tab for extras and then just hide it

Add this to your `nav-tabs`:



    <li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>


Then activate from somewhere else with JavaScript:



    $("#launchExtra").click(function() {
        $('#myTab a[href="#extra"]').tab('show')
    });

### [Working demo in jsFiddle][fiddle1]

-----

Alternatively, you could just handle the whole thing yourself.  The only thing `.tab('show')` does is remove the active class from all the other `nav-tabs` and `tab-content` elements. And then add back the `.active` class on the appropriate elements.  

So first remove all the active elements and then add back the active class:



    $("#launchExtra").click(function() {
        $(".nav-tabs .active, .tab-content .active").removeClass("active");
        $("#extra").addClass("active");
    });

### [Working demo in jsFiddle][fiddle2]

[fiddle1]: http://jsfiddle.net/KyleMit/pp9e2hkd/0
[fiddle2]: http://jsfiddle.net/KyleMit/pp9e2hkd/1

Is there a way to do the following

    
    <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>
    
    
    <div class="tab-content">
      <div class="tab-pane active" id="home">...</div>
      <div class="tab-pane" id="profile">...</div>
      <div class="tab-pane" id="messages">...</div>
      <div class="tab-pane" id="settings">...</div>
      <div class="tab-pane" id='extra'> .... </div>

    </div>

so there is another tab pane called `#extra`, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event

as bootstrap tabs.js works from trigger a `tab('show')` on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?

note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc

Bootstrap toggleable tabs without having tab links

You can see my answer to [Activate the tab of the location hash][1] for more info.

If you want to navigate to the selected URL when the page loads, you'll need to add javascript on page load to gather the necessary information from the URL and then use that to open the appropriate panel.

Here's an example using the hash value of the tab:



    $(function() {
      
        // jump to tab if it exists 
        if (location.hash) {
            $('a[href="' + location.hash + '"]').tab('show');
        }
        
        // add tab hash to url to persist state
        $(document.body).on("shown.bs.tab", function(e){
          location.hash = e.target.hash;
        });
        
    });

If the tab had an ID of `tab-two`, you could open it with the url `http://example.com/#tab-two`

### [Here's a demo in Plunker][2]
Open the window or [run it directly here][3]

[1]: https://stackoverflow.com/a/24788653/1366033
[2]: http://plnkr.co/edit/wfaHs8wOzZPkBK7Gn7WO
[3]: http://run.plnkr.co/plunks/wfaHs8wOzZPkBK7Gn7WO

I'm using Bootstrap in my rails application and i want to make tabs linkable with this form  `http://example.com/?tab=tab-one` and `http://example.com/?tab=tab-two` so I'm wondering how can I achieve this

My tabs is something like this

      <div class="optionset-menu bxsbdbdr">
        <ul class="nav nav-tabs setcustom-tab" role="tablist">
          <a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><li role="presentation" class="active hav-bordbot">Basic Infos</li></a>
          <a href="#languages-time" aria-controls="anguages-time" role="tab" data-toggle="tab"><li role="presentation" class="hav-bordbot">Language & Time zone</li></a>
          <a href="#basic" aria-controls="basic" role="tab" data-toggle="tab"><li role="presentation" class="havnt-bordbot">Change password</li></a>
        </ul>
      </div>

How to make tabs Linkable in Bootstrap

It's because you need to nest col calls inside of a `.row` class so they can properly clear the floats. 

Right after the combo boxes, the line `<div clas="row text-center"><div class="col-md-12>`" is getting overlayed on top of the other fields.  Either add them above it or add `style="clear:both"` to the row column.

[**Here's a working demo in fiddle**](https://jsfiddle.net/KyleMit/2Lmgwecy/)

I have a fairly complex Bootstrap 3 tabgroup of forms that are populated with combo boxes that work fine at desktop width, but in mobile the combo boxes are frozen or something and won't show the drop down.

Here is the first of the four forms embedded in the tab-group...

             <form role="form" id="prop-search"  name="prop-search" method="get" target="_blank" action="search.php">
                
                  <input type="hidden" name="searchtype" value="Residential">
                

                  
                  <div class="col-md-2 col-sm-6 col-xs-6">      
                    <div class="form-group">
                      <label for="location">City</label>
                      <select class="form-control" id="area" name="area">
                      
                        <?php
                          $action=basename(__FILE__, '.php');               // load action from filename for consistancy 
                          $controller = new retsController($action . '-cities'); // register controller with page action and parameter
                          $controller->invoke();                            // invokde controller to get view
                        ?>     

                      </select>
                    </div>
                  </div>
                  
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="type">Type</label>
                      <select class="form-control" id="proptype"  name="proptype">
                        <option selected>House</option>
                        <option>Condo</option>
                        <option>Townhome</option>                    
                      </select>
                    </div>
                  </div>
                    
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="bathroom">Baths</label>
                      <select class="form-control" id="baths" name="baths">
                        <option>1</option>
                        <option selected>2</option>
                        <option>3</option>
                        <option>4+</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="bedroom">Beds</label>
                      <select class="form-control" id="beds" name="beds">
                        <option>1</option>
                        <option>2</option>
                        <option selected>3</option>
                        <option>4+</option>
                      </select>
                    </div>
                  </div>
                                           
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="minprice">$-Range</label>
                      <select class="form-control" id="pricerange" name="pricerange">
                        <option value="0-100">$0-$100k</option>
                        <option value="100-175">$100k-$175k</option>
                        <option value="175-250" selected>$175k-$250k</option>
                        <option value="250-325">$250k-$325k</option>
                        <option value="325-400">$325k-$400k</option>
                        <option value="400-500">$400k-$500k</option>
                        <option value="500-600">$500k-$600k</option>
                        <option value="600-750">$600k-$750k</option>
                        <option value="750-900">$750k-$900k</option>
                        <option value="900-1100">$900k-$1.1m</option>
                        <option value="1100-1500">$1.1m-$1.5m</option>
                        <option value="1500-100000">$1.5m+</option>              
                      </select>
                    </div>
                  </div>
                
                  
                  <div class="row text-center">
                    <div class="col-md-12">
                      <div class="form-group">     
                      
                        <input type="submit" name="submit" value="search" class="btn btn-default btn-block">  
                      </div>                     
                    </div>
                  </div>
             
                </form>

Here is a quick-n-dirty fiddle showing the problem.

https://jsfiddle.net/edkwudy9/

Notice that if you pull the width wide enough where you get the 6 columns (col-md-2 in Bootstrap), the dropdowns work just fine, but when you shrink the width to col-sm-6 col-xs-6, they stop working.

I just have no idea what could be wrong and I'm burning through unbillable hours with this issue like no ones business.  

I am a backend developer who got myself roped into this project and now find myself somewhat over my head with debugging BS3 and mobile.

the actual dev site to see the control in action...

http://webwarephpdevelopment.com:8080/index.php