Prev Page
Next Page  
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

  Prev Page
Next Page