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.
![bootstrap nav tabs example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIDVCZLVXodYOUMn1xqxvKkw7W_VnPD9FoAPRLNR1AbCmWfjZsAX324DQafFCl3uDhzNTFIuDWHl9S9kiTbSBkbD3Tm-5z9llIjcxcIjMskW_XgiKi8rQOIHHfr7TR1ivdge2xM_-oLAN/s1600/bootstrap+nav+tabs+example.png)
![bootstrap nav tabs icon](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3OiUxPzwfokVlZcoolIRNnF6i9mvq-IaZLwGpsYfwijv_VmqRBSqjl0vV7bKip53B2WSmCtRXhJ7uvjhMK-TCG3MDULMz8iDTnt_Nf-gfDZf-8EIi54HoqaTdmrf1oGQdHctyz4eT-plV/s1600/bootstrap+nav+tabs+icon.png)
![bootstrap nav pills example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCmMigVDwp8zycKnCEfqFRfgNeBeDSZ_ZXVUlsqz43iqfzucAdQvlbqnpAUzoZmLvVBcJMYN37LX78bkkGsf_9Y-pnMCy7Kep_WUQaxbPThX8oEs8cRIVoSVK9xGuzzXsu7Ky1CQeHEHp/s1600/bootstrap+nav+pills+example.png)
![bootstrap nav-pills icons](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii31AmyJd82OJTUC5eHqvFnAE-cZ3z9zKsgXanZp3X4Kxsik29Frd9WKtzQ-jJnFC-QrpUVEWHa1g8uww4ss83ukDrHKVl-1XjRHB9OxWgGiym7zAYA9mBAnebyEoptoUuLs8a_y3Ui0PB/s1600/bootstrap+nav-pills+icons.png)
![bootstrap stacked nav pills](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBoIK7-_Cg6ZqKPj4z4fKsNijEjdEN4tqPn1bgY_zVUk04ipVoeiWXvPdFbz7lhXbzM4dEDouJR262PFnQj5pD398P9LoIYz-DHm0Kks71iFMrUlFQEmpe2CSTh4dWsB1x0vA9x5wyZ-D/s1600/bootstrap+stacked+nav+pills.png)
![bootstrap justified nav-pills](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfDhO_0dma8o1CgL7MfLtUZBZXwuERH7k4fScNXhDjzcZ2luDIXzl209jYgyTKNzegxjWeksnSjF2lhSFmTOqafKa9kzvBqTre2ASWsqTNTkI6CUV_sdTeXk-x3Q9ZOlts3_MByMy_3p3/s1600/bootstrap+justified+nav-pills.png)
![bootstrap justified nav tabs example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJ67T1Zvp6SrHxAveIgGLzkjgIhrOw3w1ky83ojrK0FDuoSSk07Cs6q9ZR-7sYAe2glzrNak8YUhJpiF9dqlJwR954gQS9gOvXgD5-wp2kGkDCggQUwUNJOw-aor9TvpUzFspJ0XDab-Y/s1600/bootstrap+justified+nav+tabs+example.png)
![bootstrap disable nav pills](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5YMsadg3pgaoZyGcHlPOrf3nMkQuBs2Lhyphenhyphenvc_JYxEDSYp1LfEiBkTQ_96Nmo57vtFPvExb564PPtcUWHSTQSdkI4qppIoQCLutS9dfc0IEOGGPHwuXwhSFDbYcx-ahhF4zdvGn6SB5hW/s1600/bootstrap+disable+nav+pills.png)
![bootstrap nav pills dropdown example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEb1H6yGKG5pgroDSqgIQHnMLSe2y_AeJItGWTpJUlxyBf8Q2KZtJr53143JnP6o2w0ba5cpX40qXnIq9BguSGK8pukmMPlbWpXd3rKthtndSpvgaJeQmHOwLDX3f0S50_7htCDjPkWf4/s1600/bootstrap+nav+pills+dropdown+example.png)
![bootstrap nav tabs dropdown](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipLEVN3OBRw2i2nCQ-EoHnPka7SoRbcam6s9iwG5sXSijXhwlcPad4e5BI3TYJQbqL7cv1nbKQaHI-MvNdSOinIj0ITreV3NShUmRvcG3uwmAn8kIBVHukHHQYRBSZP-fU8ubrMSqs4P14/s1600/bootstrap+nav+tabs+dropdown.png)
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.
Class | Purpose |
---|---|
nav nav-tabs | Navigation tabs |
nav nav-pills | Navigation pills |
nav-stacked | Vertically stacked navigation pills |
nav-justified | Justified pills or tabs. On screen size < 768px, the navigation links are stacked |
disabled | Disables 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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIDVCZLVXodYOUMn1xqxvKkw7W_VnPD9FoAPRLNR1AbCmWfjZsAX324DQafFCl3uDhzNTFIuDWHl9S9kiTbSBkbD3Tm-5z9llIjcxcIjMskW_XgiKi8rQOIHHfr7TR1ivdge2xM_-oLAN/s1600/bootstrap+nav+tabs+example.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3OiUxPzwfokVlZcoolIRNnF6i9mvq-IaZLwGpsYfwijv_VmqRBSqjl0vV7bKip53B2WSmCtRXhJ7uvjhMK-TCG3MDULMz8iDTnt_Nf-gfDZf-8EIi54HoqaTdmrf1oGQdHctyz4eT-plV/s1600/bootstrap+nav+tabs+icon.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCmMigVDwp8zycKnCEfqFRfgNeBeDSZ_ZXVUlsqz43iqfzucAdQvlbqnpAUzoZmLvVBcJMYN37LX78bkkGsf_9Y-pnMCy7Kep_WUQaxbPThX8oEs8cRIVoSVK9xGuzzXsu7Ky1CQeHEHp/s1600/bootstrap+nav+pills+example.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii31AmyJd82OJTUC5eHqvFnAE-cZ3z9zKsgXanZp3X4Kxsik29Frd9WKtzQ-jJnFC-QrpUVEWHa1g8uww4ss83ukDrHKVl-1XjRHB9OxWgGiym7zAYA9mBAnebyEoptoUuLs8a_y3Ui0PB/s1600/bootstrap+nav-pills+icons.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBoIK7-_Cg6ZqKPj4z4fKsNijEjdEN4tqPn1bgY_zVUk04ipVoeiWXvPdFbz7lhXbzM4dEDouJR262PFnQj5pD398P9LoIYz-DHm0Kks71iFMrUlFQEmpe2CSTh4dWsB1x0vA9x5wyZ-D/s1600/bootstrap+stacked+nav+pills.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfDhO_0dma8o1CgL7MfLtUZBZXwuERH7k4fScNXhDjzcZ2luDIXzl209jYgyTKNzegxjWeksnSjF2lhSFmTOqafKa9kzvBqTre2ASWsqTNTkI6CUV_sdTeXk-x3Q9ZOlts3_MByMy_3p3/s1600/bootstrap+justified+nav-pills.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJ67T1Zvp6SrHxAveIgGLzkjgIhrOw3w1ky83ojrK0FDuoSSk07Cs6q9ZR-7sYAe2glzrNak8YUhJpiF9dqlJwR954gQS9gOvXgD5-wp2kGkDCggQUwUNJOw-aor9TvpUzFspJ0XDab-Y/s1600/bootstrap+justified+nav+tabs+example.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5YMsadg3pgaoZyGcHlPOrf3nMkQuBs2Lhyphenhyphenvc_JYxEDSYp1LfEiBkTQ_96Nmo57vtFPvExb564PPtcUWHSTQSdkI4qppIoQCLutS9dfc0IEOGGPHwuXwhSFDbYcx-ahhF4zdvGn6SB5hW/s1600/bootstrap+disable+nav+pills.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEb1H6yGKG5pgroDSqgIQHnMLSe2y_AeJItGWTpJUlxyBf8Q2KZtJr53143JnP6o2w0ba5cpX40qXnIq9BguSGK8pukmMPlbWpXd3rKthtndSpvgaJeQmHOwLDX3f0S50_7htCDjPkWf4/s1600/bootstrap+nav+pills+dropdown+example.png)
<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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipLEVN3OBRw2i2nCQ-EoHnPka7SoRbcam6s9iwG5sXSijXhwlcPad4e5BI3TYJQbqL7cv1nbKQaHI-MvNdSOinIj0ITreV3NShUmRvcG3uwmAn8kIBVHukHHQYRBSZP-fU8ubrMSqs4P14/s1600/bootstrap+nav+tabs+dropdown.png)
<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>