title: Nested Tabs switching in Bootstrap 4 Beta
body: <p>I'm currently using Bootstrap 4 beta and I have nested tabs. When try to switch between them it confuses. </p>
  
  <p>I'm not sure it had the same behaviour in Bootstrap 4 alphas but I think it is a new behaviour in the beta.</p>
  
  <p>HTML (<a href="https://jsfiddle.net/j4Lgbe6o/4/" rel="nofollow noreferrer">JSFiddle</a>):</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;div class="card-header"&gt;
      &lt;ul class="nav nav-tabs card-header-tabs" id="outerTab" role="tablist"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" data-toggle="tab" href="#tabc" aria-controls="tabc" role="tab" aria-expanded="true"&gt;Tab-1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#tabb" aria-controls="tabb" role="tab"&gt;Tab-2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#taba" aria-controls="taba" role="tab"&gt;Tab-3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="card-body tab-content"&gt;
      &lt;div class="tab-pane active" id="tabc" role="tabpanel"&gt;
      Content for Tab-1 and:
        &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
            &lt;ul class="nav nav-tabs card-header-tabs" id="innerTab" role="tablist"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link active" data-toggle="tab" href="#tab1" aria-controls="tab1" role="tab" aria-expanded="true"&gt;Nested Tab-1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" data-toggle="tab" href="#tab2" aria-controls="tab2" role="tab"&gt;Nested Tab-2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" data-toggle="tab" href="#tab3" aria-controls="tab3" role="tab"&gt;Nested Tab-2&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="card-body tab-content"&gt;
            &lt;div class="tab-pane active" id="tab1" role="tabpanel"&gt;
              Content for Nested Tab-1
            &lt;/div&gt;
            &lt;div class="tab-pane" id="tab2" role="tabpanel"&gt;
              Content for Nested Tab-2
            &lt;/div&gt;
            &lt;div class="tab-pane" id="tab3" role="tabpanel"&gt;
              Content for Nested Tab-3
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="tabb" role="tabpanel"&gt;
        Content for Tab-2
      &lt;/div&gt;
      &lt;div class="tab-pane" id="taba" role="tabpanel"&gt;
        Content for Tab-3
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>