Limited number of tabpages in boostrap 5

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 class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><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 class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
  </div>
</div>


Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)