HI WELCOME TO Sirees

Bootstrap nav component

In this we will discuss bootstrap nav component 

Bootstrap tutorial for beginners

Bootstrap nav component makes it very easy to create navigation components i.e navigation tabs and pills. The following table shows the classes that are useful for creating navigation tabs and pills. 

ClassPurpose
nav nav-tabsNavigation tabs
nav nav-pillsNavigation pills
nav-stackedVertically stacked navigation pills
nav-justifiedJustified pills or tabs. On screen size < 768px, the navigation links are stacked
disabledDisables navigation tab or pill
Dropdown menu can also be used with navigation tabs and pills

Please note : The base markup for both navigation tabs and pills is in nav class.

Creating navigation tabs : Use nav-tabs class along with the base nav class.

bootstrap nav tabs example

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>

</ul>

Creating navigation tabs with icons :

bootstrap nav tabs icon

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Creating navigation pills : Use nav-pills class along with the base nav class.

bootstrap nav pills example

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>

Creating navigation pills with icons: Use a <span> element with class="Glyphicon Name"

bootstrap nav-pills icons

<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-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Creating stacked navigation pills : To vertically stack navigation pills use nav-stacked class

bootstrap stacked nav pills

<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-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Creating justified navigation pills : Use nav-justified class

bootstrap justified nav-pills

<ul class="nav nav-pills nav-justified">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Creating justified navigation tabs : Use nav-justified class
bootstrap justified nav tabs example

<ul class="nav nav-tabs nav-justified">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Disabling navigation links : To make the links appear disabled use disabled class. This class only changes the appearance of the link, but not it's functionality. To disable link navigation, use custom JavaScript.

bootstrap disable nav pills

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li class="disabled">
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-info-sign"></span> About
        </a>
    </li>
</ul>

Navigation pills with dropdown menu : 

bootstrap nav pills dropdown example

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li class="disabled">
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-info-sign"></span> About
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Mission</a></li>
            <li><a href="#">Vision</a></li>
            <li><a href="#">Products</a></li>
        </ul>
    </li>
</ul>

Navigation tabs with dropdown menu : Same code as above, except nav-pills class is replaced with nav-tabs class

bootstrap nav tabs dropdown

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-home"></span> Home
        </a>
    </li>
    <li class="disabled">
        <a href="#">
            <span class="glyphicon glyphicon-earphone"></span> Contact
        </a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-info-sign"></span> About
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Mission</a></li>
            <li><a href="#">Vision</a></li>
            <li><a href="#">Products</a></li>
        </ul>
    </li>
</ul>