I am trying to achieve this effect: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab&stacked=h with Bootstrap 5 and using it inside a Bootstrap Card.
I've first tried without cards
I've literally copied the above example and it's not working https://jsfiddle.net/zqdsLeyj/
I've put my whole page in the JS above, but this is the part that I am trying to implement right now:
<div class="container network_wrapper col-sm p-2 ">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem
aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.</p>
</div>
</div>
</div>
The Nav and Tabs styling or functionality do not work for some reason.
What I want to achieve is to have Tabs inside a Card:
Something like this, which obviously doesn't work:
<div class="container network_wrapper col-sm p-2 ">
<div class="card">
<div class="card-header">
<h5 class="card-title">Network Settings</h5>
<ul class="nav nav-tabs card-header-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-toggle="tab"
href="#dhcp">DHCP</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#static">Static</a>
</li>
</ul>
</div>
<form class="card-body" class="tab-content">
<div class="tab-pane" id="dhcp>
<p class=" card-text">Change DHCP Network settings.</p>
</div>
<div class="tab-pane" id="static>
<p class=" card-text">Change Static Network settings.</p>
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
</div>
</div>
I've also tried this: https://www.codegrepper.com/code-examples/whatever/bootstrap card with working nav tabs without avail.
I haven't tried using JS and I'm not looking for a JS solution, because the functionality is surely built in Bootstrap 5. I just don't understand how to use it.
I've added bootstrap CSS (inside head tab) and JS (at the end of the body tag) to my HTML file:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
CodePudding user response：
Fix the improper HTML structure, and follow the guidance in the Bootstrap docs. Bootstrap 5 uses data-bs- not data- atttributes...
<div class="card">
<div class="card-header">
<h5 class="card-title">Network Settings</h5>
<ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#dhcp">DHCP</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#static">Static</a>
</li>
</ul>
</div>
<form class="card-body tab-content">
<div class="tab-pane active" id="dhcp">
<p class="card-text">Change DHCP Network settings.</p>
</div>
<div class="tab-pane" id="static">
<p class=" card-text">Change Static Network settings.</p>
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
</div>