Bootstrap Navigation Elements

In bootstrap we have a number of options to style the navigation elements. The styling options for navigation elements can be used by simply adding the base class that is .nav. We can also switch between the styles of navigation elements in bootstrap by swapping the classes.

 

Tabular Navigation or Tabs:

In bootstrap, navigation can be created by following the following steps:

  1. Use the <ul> tag for the unordered list with the .nav
  2. 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:

Tabular Navigation or Tabs

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:

Basic Pills

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:

Vertical Pills

 

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:

Justified Nav

 

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:

introduction

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:

  1. Create an unordered list by using the <ul> tag along with the class .nav.
  2. Now use the class .nav-tabs.
  3. 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:

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:

Pills with Dropdowns