Bootstrap: Nested Tabs switching in Bootstrap 4 Beta

[kaansengul]

I'm currently using Bootstrap 4 beta and I have nested tabs. When try to switch between them it confuses.

I'm not sure it had the same behaviour in Bootstrap 4 alphas but I think it is a new behaviour in the beta.

HTML (JSFiddle):

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="outerTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tabc" aria-controls="tabc" role="tab" aria-expanded="true">Tab-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabb" aria-controls="tabb" role="tab">Tab-2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#taba" aria-controls="taba" role="tab">Tab-3</a>
      </li>
    </ul>
  </div>
  <div class="card-body tab-content">
    <div class="tab-pane active" id="tabc" role="tabpanel">
    Content for Tab-1 and:
      <div class="card">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs" id="innerTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#tab1" aria-controls="tab1" role="tab" aria-expanded="true">Nested Tab-1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab2" aria-controls="tab2" role="tab">Nested Tab-2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab3" aria-controls="tab3" role="tab">Nested Tab-2</a>
            </li>
          </ul>
        </div>
        <div class="card-body tab-content">
          <div class="tab-pane active" id="tab1" role="tabpanel">
            Content for Nested Tab-1
          </div>
          <div class="tab-pane" id="tab2" role="tabpanel">
            Content for Nested Tab-2
          </div>
          <div class="tab-pane" id="tab3" role="tabpanel">
            Content for Nested Tab-3
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tabb" role="tabpanel">
      Content for Tab-2
    </div>
    <div class="tab-pane" id="taba" role="tabpanel">
      Content for Tab-3
    </div>
  </div>
</div>

[Johann-S]

Already fixed by https://github.com/twbs/bootstrap/pull/23087
and will be available in our next release

[GrischaK]

I have the same problem. Is it possible to add a temporary fix with an additional file(s) for bootstrap-4.0.0-beta ?

[Johann-S]

No but you can download our last dist files to get this fix