Unable to resolve tabpanel id for implementing tab panes in Razor Pages - tabs

Question

Okay, this is probably a very foolish issue, but I am a beginner to Bootstrap and Razor Pages, and I'm not sure why this error is even happening.
I'm trying to implement tabs and their respective tab panels on a single page using ASP.net Razor Pages. As I'm just trying out stuff right now, I copied the example code from the Bootstrap nav documentation (https://getbootstrap.com/docs/5.2/components/navs-tabs/) under the Javascript Behavior section for creating tab panels. Copied below:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1..</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2.</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..3</div>
</div>
</nav>
The page does load the tabs without issue, but refuses to let me switch between them. The best I can figure, given a "Cannot resolve ID" warning on all three hrefs in the tablist's items, for some reason the nav-items can't locate their respective tabpanels?
I can see that it's trying to access #nav-home, #nav-profile, and #nav-contact, but it's not displaying the panel content like it should, as you can see.
I've struggled to find anything online that might address this issue, likely due to triviality. I have tried adjusting the scope of the id's, as I thought, hesitantly, it might help, but nothing has produced any results. Just a few tabs that won't toggle or display their panel content.
For clarification, I'm using Bootstrap 5.1.0 and coding in JetBrains Rider.
Any help would be appreciated!

Answer 1

You need to use data-bs-toggle="tab" instead of data-toggle="tab".
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1..</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2.</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..3</div>
</div>