Bootstrap 4 nav pills in navbar - html

Question

I am new to bootstrap and want to have nav pills in my navigation bar to switch the content of the page (like tabs). Without the navbar it is working, but i would like to have it in my navbar.
This is my code so far:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
The issue i have, is that i can't switch back to an already opened "tab". I fi remove the "data-toggle" property, it works for the buttons, but not for the content switching.

Answer 1

Add the nav class to the nav-pills, and the content switching will work as expected for Tabs...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
Demo: https://www.codeply.com/go/Xr6tLFbqKj