What is wrong with my Bootstrap data-toggle implementation? - html

Question

So I'm trying to implement a data toggle using bootstrap 4.2.1. Following the documentation, I came up with the following code:
<div class="container">
<div class="row bottom-section position-relative">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link nav-team active text-center" id="team-tab" data-toggle="tab" data-target="#team" aria-controls="team" role="tab" aria-selected="true">Team</a>
</li>
<li class="nav-item">
<a class="nav-link nav-individual text-center" id="individual-tab" data-toggl="tab" data-target="#individual" aria-controls="individual" role="tab" aria-selected="false">Individual</a>
</li>
</ul>
<div class="bottom-section-content col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="team" role="tabpanel" aria-labelledby="team-tab"><p>asd</p></div>
<div class="tab-pane" id="individual" role="tabpanel" aria-labelledby="individual-tab"><p>sad</p></div>
</div>
</div>
</div>
</div>
I cant't figure out what is wrong, it should be working like this. Am I missing something with the bootstrap js?

Answer 1

I used your code and found that if you are using 4.1.3, this implementation will not work with your current HTML. You have to upgrade your JS to Bootstrap 4.2.1.
Use: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js
Also #elveti is right you misspelled data-toggle.
Working Example using (4.2.1): https://codepen.io/brooksrelyt/pen/zeNVxo