In Bootstrap, there are many options with the help of which we can style navigation elements and these all share the same markup and base class .nav .
Following are those different options :-
Tabular Navigation or Tabs :- To create a Tabular Navigation , firstly start with basic unordered list<ul></ul> with the base class of .nav and add class .nav-tabs to it as shown in example :-
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Gallery</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
Example :- https://jsfiddle.net/8zcdh7vL/
Pills Navigation :- Pills navigation is of two types :-
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Gallery</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
Following link shows you the example of Basic Pills Navigation :-
https://jsfiddle.net/8zcdh7vL/1/
Below is the link shows you the example :-
https://jsfiddle.net/8zcdh7vL/3/
<ul class = "nav nav-pills nav-stacked">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Gallery</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
Justified Nav :- To make the tabs or pills of equal widths as of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills .
Example :- https://jsfiddle.net/8zcdh7vL/4/
<ul class = "nav nav-pills nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Gallery</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
0 Comment(s)