Tabs

Tab based navigations make easy fo a user to handle huge amount of content in small area.  you can set the separate content into different panes. Each panes is viewable one at a time. The user can easily accessible the content through switching between the panes.

Example of Code

<ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#FirstTab">First Tab</a></li>
        <li><a data-toggle="tab" href="#SecondTab">Second Tab</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#dropdown1">Dropdown 1</a></li>
                <li><a data-toggle="tab" href="#dropdown2">Dropdown 2</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div id="FirstTab" class="tab-pane fade in active">
            <h3>First Tab</h3>
            <p>Your first tab content is here</p>
        </div>
        <div id="SecondTab" class="tab-pane fade">
            <h3>Second Tab</h3>
            <p>Your second tab content is here</p>
        </div>
        <div id="dropdown1" class="tab-pane fade">
            <h3>Dropdown 1</h3>
            <p>Dropdown first is here</p>
        </div>
        <div id="dropdown2" class="tab-pane fade">
            <h3>Dropdown 2</h3>
            <p>Dropdown second is here</p>
        </div>
    </div>

Output