We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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>
The text was updated successfully, but these errors were encountered:
Already fixed by #23087 and will be available in our next release
Sorry, something went wrong.
I have the same problem. Is it possible to add a temporary fix with an additional file(s) for bootstrap-4.0.0-beta ?
No but you can download our last dist files to get this fix
No branches or pull requests
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):
The text was updated successfully, but these errors were encountered: