Navigation Tabs in Bootstrap

How to create navigation tabs using Bootstrap?

Navigation Elements

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style. such as tabular navigation (tabs) and (pills).

 <h3>Menu List</h3>
    <div class="container"> 
        <ul class="list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Interviews</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">CareerAdive</a></li>
            <li><a href="#">Codes</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Forums</a></li>
        </ul>
    </div>

In the above code snippet we have defined the menu using unordered list and ordered list by using class as list inline which create list in the line

output

Menu using navigation tab

We can create menu using navigation tab, we use nav-tab for creating the navigation tab

 <h3>Menu List using nav tab</h3>
    <div class="container"> 
        <ul class="nav nav-tabs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Interviews</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">CareerAdvice</a></li>
        </ul>
    </div>

Navigation tab

In the above code snippet we have defined the navigation tab using nav tab which creates the list in the line

output

Navigation tab with dropdown menu

We can create dropdown menu in navigation tab

 <div class="container">
        <h3>Tabs With Dropdown Menu</h3>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML5</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>
            <li class="disabled"><a href="#">Articles</a></li>
            <li><a href="#">Codes</a></li>
        </ul>
    </div>

Navigation tab with dropdown menu

In the above code snippet we have defined the dropdown menu to the navigation tab, we created list using nav tab in the class and to the list we added class as dropdown to the tutorial by giving values in the dropdown list, we have given active to home and disabled to Articles

output