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