Tabstrips comprise of 2 components the tabs and a series of content containers

The tabs and their containers are linked by ensuring the id attribute of the container is referenced in the href attribute of the tab and is unique on the page.

A single tab can be set active by adding the class "active" both to it and to the matching container.

Any tab can be set as disabled by adding the class "disabled" both to it and to the matching container.

    
      Tabs
      <ul class="nav nav-tabs">
        <li>
          <a href="#home" data-toggle="tab">
            Tab 1
          </a>
        </li>
        <li>
          <a href="#profile" data-toggle="tab">
            Tab 2
          </a>
        </li>
        <li class="active">
          <a href="#messages" data-toggle="tab">
            Tab 3
          </a>
        </li>
        <li class="disabled">
          <a href="#settings" data-toggle="tab">
            Tab 4
          </a>
        </li>
      </ul>
      

      

      Content Containers
      <div class="tab-content">
        <div class="tab-pane" id="home">
          Tab 1 Content
        </div>
        <div class="tab-pane" id="profile">
          Tab 2 Content
        </div>
        <div class="tab-pane active" id="messages">
          Tab 3 Content
        </div>
        <div class="tab-pane disabled" id="settings">
          Tab 4 Content
        </div>
      </div>