Bootstrap Tutorial - Create Bootstrap Pills








Pills

Take same HTML, use .nav-pills: 

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   www. j ava2  s .co  m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
 
</body> 
</html>

Click to view the demo





Vertical Pills

Pills are also vertically stackable. Just add .nav-stacked. 

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- w  ww.  j  a  v  a 2 s. com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
 
</body> 
</html>

Click to view the demo





Justified Pill

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  ww  w  . j a va2s . c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>

</body>
</html>

Click to view the demo

Disabled state

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

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w  .j  a v a  2  s. c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <ul class="nav nav-pills">
    <li><a href="#">Clickable link</a></li>
    <li><a href="#">Clickable link</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
  </ul>
</body>
</html>

Click to view the demo