title: Can't Switch between tabs in bootstrap 5 nav tabs
body: <p>I am trying to create a log in page , in which there will be two tabs . One for Log in and another for Register.I want to display username, password in log in tab and name, last name, e-mail in register tab. I have wrote the code and I can see those two tabs but the problem is I can't switch between them if I kept class=&quot;nav-link active&quot; for log in tab alone then it is only been displayed even though I can see and touch the register tab I it's not switching.The same Happens when I keep class=&quot;nav-link active&quot; register tab alone the log in tab is not accessible.I hope I have explained it clearly please feel free to enlighten me.All kind of replies are welcomed.Thank you.
  The HTML Code:</p>
  <pre><code>&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
          &lt;ul class=&quot;nav nav-tabs&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link active&quot; href=&quot;#login-contents&quot; id=&quot;login-tab&quot;&gt;Log In&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot; &gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#register-contents&quot; id=&quot;register-tab&quot;&gt;Register&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;tab-content&quot;&gt;
              &lt;div id=&quot;login-contents&quot; class=&quot;tab-pane active&quot;&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Username :&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;ip-username&quot; placeholder=&quot;Username&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Password :&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Password&quot; id=&quot;ip-password&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div id=&quot;register-contents&quot; class=&quot;tab-pane fade&quot;&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Name :&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;First Name&quot; id=&quot;ip-f-name&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Last Name :&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Last Name&quot; id=&quot;ip-l-name&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;E-Mail :&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Your E-Mail Id&quot; id=&quot;ip-e-mail&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;A OTP will be sent to your mail id for verification.&lt;/td&gt;
                          &lt;td&gt;&lt;Button class=&quot;btn btn-success&quot; id=&quot;register-btn&quot;&gt;Register&lt;/Button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>