Navigation pills in Bootstrap

How to create navigation pills using Bootstrap?

Navigation pills

Navigation pills are used to change the tabs into the pills using nav pills

<body>
    <ul class="nav nav-pills">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> BookMarks</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
    </ul>
</body>

In the above code snippet we have defined the navigation pills, we have used nav-pills to create navigation pills in the ul element and in the li element we have the list values to define the navigation pills

Output

Nav stacked

It is used in the navigation to create navigation pills in vertical direction

<body>
    <ul class="nav nav-pills nav-stacked ">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> BookMarks</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
    </ul>
</body>

Nav stacked

In the above code snippet we have used nav stacked in the navigation pills which creates the list in the vertical direction

Output