Limited number of tabpages in boostrap 5-CodePudding

Using Rails 7 and Bootstrap 5.1

According to this code snippet I managed to get four tabpages. When trying to add a fifth tabpage it is showing only the tab but when clicking on it, the tab seems to be inactiv and it isn't showning any content. Is the number of tabpages limited to four or do I have to do any configuration?

<div>
  <!-- Nav tabs -->
  <ul  role="tablist">
    <li role="presentation" ><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div >
    <div role="tabpanel"  id="home">Home Content</div>
    <div role="tabpanel"  id="profile">Profile Content</div>
    <div role="tabpanel"  id="messages">Messages Content</div>
    <div role="tabpanel"  id="settings">Settings Content</div>
  </div>
</div>

CodePudding user response：

Nothing should prevent you from using more than 4 tabs. There should be something wrong in your HTML. Maybe you can also check your console to see if there's anything wrong occurring with the JS.

Also that would be simpler to help if you provide an example of the non-working situation.

Here is a working example using bootstrap 5, with six tabs used.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
  <ul  id="myTab" role="tablist">
    <li  role="presentation">
      <button  id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li  role="presentation">
      <button  id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
    <li  role="presentation">
      <button  id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
    </li>
    <li  role="presentation">
      <button  id="other-tab" data-bs-toggle="tab" data-bs-target="#other-tab-pane" type="button" role="tab" aria-controls="other-tab-pane" aria-selected="false">Other</button>
    </li>
    <li  role="presentation">
      <button  id="yetanother-tab" data-bs-toggle="tab" data-bs-target="#yetanother-tab-pane" type="button" role="tab" aria-controls="yetanother-tab-pane" aria-selected="false">Yet another</button>
    </li>
    <li  role="presentation">
      <button  id="stillanother-tab" data-bs-toggle="tab" data-bs-target="#stillanother-tab-pane" type="button" role="tab" aria-controls="stillanother-tab-pane" aria-selected="false">Still another</button>
    </li>
  </ul>
  <div  id="myTabContent">
    <div  id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">A</div>
    <div  id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">B</div>
    <div  id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">C</div>
    <div  id="other-tab-pane" role="tabpanel" aria-labelledby="other-tab" tabindex="0">D</div>
    <div  id="yetanother-tab-pane" role="tabpanel" aria-labelledby="yetanother-tab" tabindex="0">E</div>
    <div  id="stillanother-tab-pane" role="tabpanel" aria-labelledby="stillanother-tab" tabindex="0">F</div>
  </div>



  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>

</body>

</html>