The choice of tags is an important factor when switching tabs in Bootstrap’s nav tabs.
The tab-content and
tab-pane
classes work properly when used with the div
tag, respectively. If these classes are used with ul or
li
tags, tab switching may not work properly.
For example, the following code will not work correctly
<ul class="tab-content">
<li class="tab-pane active" id="home">... </li>
<li class="tab-pane" id="profile">... </li>
</ul>
Instead, use a div
tag as follows
<div class="tab-content">
<div class="tab-pane active" id="home">... </div>
<div class="tab-pane" id="profile">... </div>
</div>