Bootstrap Navigation Elements
Tabular Navigation or Tabs:
In bootstrap, navigation can be created by following the following steps:
- Use the <ul> tag for the unordered list with the .nav
- Now use .nav-tabs
Consider the following example in which we have created tabs:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example </title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<center><h4>Tabular Navigation</h4></center>
<ul class = “nav nav-tabs”>
<li class = “active”><a>Introduction</a></li>
<li><a>C++</a></li>
<li><a>Java</a></li>
<li><a>Python</a></li>
<li><a>Matlab</a></li>
<li><a>Ruby</a></li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example, we can also add the links for the respective tags in the <a> tag by using the href attribute.
Pills Navigation:
Basic Pills:
In bootstrap we can change the navigation tabs into pills. This can be done by using the <ul> tag for unordered list along with .nav-pills class. It should be noted here that this time we are not using .nav-tags class.
Consider the following example in which we have used the .nav-pills class to create navigation pills:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
< script src = “/ scripts/ jquery. min. js” ></ script >
< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< center >< h4 > Navigation Pills </ h4 ></ center >
< ul class = “nav nav- pills” >
< li class = “active” >< a > Introduction </ a ></ li >
< li >< a > C++ </ a ></ li >
< li >< a> Java </ a ></ li >
< li >< a > Ruby </ a ></ li >
< li >< a> Python </ a ></ li >
< li >< a > Matlab </ a ></ li >
< /ul >
</ body >
</ html >
The above example will generate the following result:
OUTPUT:
In the above example, we can also add the links for the respective tags in the <a> tag by using the href attribute.
Vertical Pills:
The pills can be created vertically in bootstrap by using the class .nav-stacked with other classes like .nav and .nav-pills.
Consider the following example in which we have created vertical pills:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = ” / bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = “/ scripts/ jquery. min. js” ></ script >
< script src = ” / bootstrap/ js/ bootstrap. min. js ” ></ script >
</ head >
< body >
< center >< h4 > Vertical Pills </ h4 ></ center >
< ul class = “nav nav- pills nav- stacked” >
< li class = “active” >< a > Introduction </ a ></ li >
< li >< a > C++ </ a ></ li >
< li >< a > Matlab </ a ></ li >
< li >< a > Python </ a ></ li >
< li >< a > Ruby </ a ></ li >
< li >< a > Java </ a ></ li >
</ ul >
</ body >
</ html >
The above example will generate the following result:
OUTPUT:
Justified Nav:
The tabs or pills can be adjusted to a screen wider than 780px. This can be done by using the .nav-justified with the classes like .nav, .nav-pills or .nav, .nav-tabs. If the screen is smaller, the navigation links or tabs will be stacked.
Consider the following example in which we have justified the tabs:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<center><h4>Justified Nav Elements </h4></center>
<ul class = “nav nav-pills nav-justified”>
<li class = “active”><a>Introduction</a></li>
<li><a>C++</a></li>
<li><a>Java</a></li>
<li><a>Matlab</a></li>
<li><a>Python</a></li>
<li><a>Ruby</a></li>
</ul>
<br>
<ul class = “nav nav-tabs nav-justified”>
<li class = “active”><a>Introduction</a></li>
<li><a>C++</a></li>
<li><a>Java</a></li>
<li><a>Matlab</a></li>
<li><a>Python</a></li>
<li><a>Ruby</a></li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Disabled Links:
A disabled tab can be created by adding the .disabled class to .nav class. Consider the following example in which we have created a disabled link or tab:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example</title>
< link href = “ /bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<center><h4>Disabled Link or Tab</h4></center>
<ul class = “nav nav-pills”>
<li class = “active”><a>Introduction</a></li>
<li><a>C++</a></li>
<li class = “disabled”><a>Python</a></li>
<li><a>Java</a></li>
<li><a>Matlab</a></li>
<li><a>Ruby</a></li>
</ul>
<br>
<br>
<ul class = “nav nav-tabs”>
<li class = “active”><a>Introduction</a></li>
<li><a>C++</a></li>
<li><a>Java</a></li>
<li class = “disabled”><a>Matlab</a></li>
<li><a>Ruby</a></li>
<li><a>Python</a></li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example, the tabs Python and Matlab are the disabled links.
Dropdowns:
The navigation menus and the dropdown menus have a similar syntax. When we use the dropdown-menu class, we will have list of items.
Tabs with Dropdowns:
Consider the following steps to add dropdowns to tabs:
- Create an unordered list by using the <ul> tag along with the class .nav.
- Now use the class .nav-tabs.
- Again add an unordered list using <ul> tag with the .dropdown-menu
Consider the following example in which we have created tabs that will have a dropdown menu:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = ” / bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = ” / scripts/ jquery. min. js” ></ script >
< script src = “/ bootstrap/ js/ bootstrap. min. js ” ></ script >
</ head >
< body >
< center >< h4 > Tabs With Dropdown </ h4 ></ center >
< ul class = “nav nav- tabs” >
< li class = “active” >< a > Introduction </ a ></ li >
< li >< a > C++ </ a ></ li >
< li >< a > Java </ a >< /li >
< li >< a > Python </ a ></ li >
< li class = “dropdown” >
< a class = “dropdown- toggle” data- toggle = “dropdown” >
Ruby
< span class = “caret” >< / span >
</ a >
< ul class = “dropdown- menu” >
< li >< a > Operators </ a ></ li >
< li >< a > Loops </ a ></ li >
< li >< a > Modules </ a >< / li >
< /ul >
</ li >
< li >< a > PHP </ a ></ li >
</ ul >
< /body >
</ html >
The above code will generate the following result:
OUTPUT:
Pills with Dropdowns:
We can also add dropdown menus in pills. This can be done by using the class .nav-tabs with the .nav-pills class. Consider the following example in which we have added the dropdown menu in the pills:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = “/ bootstrap / css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = ” / scripts/ jquery. min. js” ></ script >
< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< center >< h4 > Pills With Dropdown </ h4 ></ center >
< ul class = “nav nav- pills” >
< li class = “active” >< a > Introduction </ a ></ li >
< li >< a > C++ </ a ></ li >
< li><a>Java</a></li>
<li><a>Matlab</a></li>
<li class = “dropdown”>
<a class = “dropdown-toggle” data-toggle = “dropdown”>
Ruby <span class = “caret”></span>
</a>
<ul class = “dropdown-menu”>
<li><a>Operators</a></li>
<li><a>Loops</a></li>
<li><a>Modules</a></li>
</ul>
</li>
<li><a>Python</a></li>
</ul>
</body>
</html>
The above example will generate the following result:
OUTPUT: