title: Bootstrap 4 nav pills in navbar
body: <p>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.</p>
  
  <p>This is my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-dark bg-dark navbar-expand-sm"&gt;
    &lt;span class="navbar-brand mb-0 h1"&gt;ioBroker&lt;/span&gt;
  
    &lt;ul class="navbar-nav nav-pills"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1"&gt;Content 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2"&gt;Content 2&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;main role="main" class="container-full"&gt;
    &lt;div class="container-full"&gt;
      &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel"&gt;Content 1&lt;/div&gt;
        &lt;div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel"&gt;Content 2&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>