Bootstrap Navs, Full details of Bootstrap Navs

Bootstrap Tutorial

Bootstrap Navs

Bootstrap Navs available in shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. For tabs with tabbable areas, you must use the tabs JavaScript plugin.

The Bootstrap Navs are mainly 5 types there are Tabs, Pills, Justified, Disabled links and Dropdowns.

Bootstrap Tabs

Base class is (.nav) add exatra one (.nav-tabs) class

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tabs</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="row">
    
<ul class="nav nav-tabs">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
   <li><a href="#">JQUERY</a></li>
</ul>
   
</div>
 
</body>
</html>

Output :

Bootstrap Pills

Base class is (.nav) add exatra one (.nav-pills) class

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Pills</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<h4>Basic Pills</h4>
<ul class="nav nav-pills">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
   <li><a href="#">JQUERY</a></li>
</ul>
 
<br /><br />
 
<h4>Verticle Pills (or) Stacked Pills</h4>
<ul class="nav nav-pills nav-stacked">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
   <li><a href="#">JQUERY</a></li>
</ul>
   
</div>
 
</body>
</html>

Output :

Basic Pills

Verticle Pills (or) Stacked Pills

Justified Navs

Using the bootstrap class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Justified Navs</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<h4>Justified Nav Tabs</h4>
<ul class="nav nav-tabs nav-justified">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
</ul>
 
<br /><br />
 
<h4>Justified Nav Pills</h4>
<ul class="nav nav-pills nav-justified">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
</ul>
   
</div>
 
</body>
</html>

Output :

Justified Nav Tabs

Justified Nav Pills

Disabled links

For any bootstrap nav component (tabs or pills), add .disabled for gray links and no hover effects.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Disabled Links</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<ul class="nav nav-tabs">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li class="disabled"><a href="#">PHP</a></li>
</ul>
 
<br /><br />
 
<ul class="nav nav-pills">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li class="disabled"><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
</ul>
   
</div>
 
</body>
</html>

Output :

Dropdowns

Bootstrap dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Dropdown Navs</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<h4>Dropdown Nav Tabs</h4>
<ul class="nav nav-tabs">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       HTML<span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Tables</a></li>
         <li><a href="#">Lists</a></li>
         <li><a href="#">Backgrouds</a></li>
         <li class="divider"></li>
         <li><a href="#">Forms</a></li>
         <li><a href="#">Colors</a></li>
      </ul>
   </li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li class="disabled"><a href="#">PHP</a></li>
</ul>
 
<br /><br />
 
<h4>Dropdown Nav Pills</h4>
<ul class="nav nav-pills">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       JAVASCRIPT<span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Variables</a></li>
         <li><a href="#">Operators</a></li>
         <li><a href="#">Data Types</a></li>
         <li class="divider"></li>
         <li><a href="#">Functions</a></li>
         <li><a href="#">Loops</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>
   
</div>
 
</body>
</html>

Output :

Dropdown Nav Tabs

Dropdown Nav Pills

Bootstrap Tutorial