Bootstrap’s nav tab: how to use the right tags

The choice of tags is an important factor when switching tabs in Bootstrap’s nav tabs.

The tab-content andtab-pane classes work properly when used with the div tag, respectively. If these classes are used with ul orli 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>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top