CODEWITHSUNDEEP
htmltwitter-bootstraptabsbootstrap-5login-page
Namasivaayam L
Namasivaayam L

Reputation: 39

Can't Switch between tabs in bootstrap 5 nav tabs

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="nav-link active" 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="nav-link active" 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:

<body>
<div class="container">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#login-contents" id="login-tab">Log In</a>
            </li>
            <li class="nav-item" >
                <a class="nav-link" href="#register-contents" id="register-tab">Register</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="login-contents" class="tab-pane active">
                <table>
                    <tr>
                        <td>Username :</td>
                        <td><input type="text" id="ip-username" placeholder="Username"></td>
                    </tr>
                    <tr>
                        <td>Password :</td>
                        <td><input type="text" placeholder="Password" id="ip-password"></td>
                    </tr>
                </table>
            </div>
            <div id="register-contents" class="tab-pane fade">
                <table>
                    <tr>
                        <td>Name :</td>
                        <td><input type="text" placeholder="First Name" id="ip-f-name"></td>
                    </tr>
                    <tr>
                        <td>Last Name :</td>
                        <td><input type="text" placeholder="Last Name" id="ip-l-name"></td>
                    </tr>
                    <tr>
                        <td>E-Mail :</td>
                        <td><input type="text" placeholder="Your E-Mail Id" id="ip-e-mail"></td>
                    </tr>
                    <tr>
                        <td>A OTP will be sent to your mail id for verification.</td>
                        <td><Button class="btn btn-success" id="register-btn">Register</Button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

Upvotes: 1

Views: 4822

Answers (2)

Arleigh Hix
Arleigh Hix

Reputation: 10877

Your code works by just adding data-bs-toggle="tab" to each of your a.nav-links

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#login-contents" id="login-tab" data-bs-toggle="tab">Log In</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#register-contents" id="register-tab" data-bs-toggle="tab">Register</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="login-contents" class="tab-pane active">
      <table>
        <tr>
          <td>Username :</td>
          <td><input type="text" id="ip-username" placeholder="Username"></td>
        </tr>
        <tr>
          <td>Password :</td>
          <td><input type="text" placeholder="Password" id="ip-password"></td>
        </tr>
      </table>
    </div>
    <div id="register-contents" class="tab-pane fade">
      <table>
        <tr>
          <td>Name :</td>
          <td><input type="text" placeholder="First Name" id="ip-f-name"></td>
        </tr>
        <tr>
          <td>Last Name :</td>
          <td><input type="text" placeholder="Last Name" id="ip-l-name"></td>
        </tr>
        <tr>
          <td>E-Mail :</td>
          <td><input type="text" placeholder="Your E-Mail Id" id="ip-e-mail"></td>
        </tr>
        <tr>
          <td>A OTP will be sent to your mail id for verification.</td>
          <td>
            <Button class="btn btn-success" id="register-btn">Register</Button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Upvotes: 6

Carol Skelly
Carol Skelly

Reputation: 362360

Use the Tabs component and markup as shown in the Bootstrap 5 docs

There is nothing in your code that would trigger the Tabs.

Upvotes: 1

Related Questions