Bootstrap Tutorial - Bootstrap Pills

The class nav is common to both tabs and pills.

We can create a basic pill based navigation using the base class .nav-pills instead of .nav-tabs, without any further change in markup.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from w w w  .j  ava  2s.c  om-->
  <body style='margin:30px'>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">About</a></li>
        <li><a  href="#">Activity</a></li>
        <li><a  href="#">Liked Pages</a></li>
    </ul>


  </body>
</html>

Click to view the demo

Example 2

We can vertically stack these pills by attaching an additional class nav-stacked to it:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--   w  w w  .j a  v  a2 s  . c om-->
  <body style='margin:30px'>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">About</a></li>
        <li><a  href="#">Activity</a></li>
        <li><a  href="#">Liked Pages</a></li>
    </ul>


  </body>
</html>

Click to view the demo

Adding Icons to Pills Nav

We can add icons to pills nav.

<!-- w  w w .java 2  s  .c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-pills">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
    </ul>
</div>
</body>
</html>

Click to view the demo

Stacked Pills Nav

Pills navigations are horizontal by default. To make vertical pills stacked, add an extra class .nav-stacked to the <ul> element.

<!--from   w ww. ja va  2  s  .  c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <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>
</div>
</body>
</html>

Click to view the demo

Justified Tabs and Pills

We can make tabs and pills nav having widths equal to their parent element by adding an extra class .nav-justified.

It works only on screens which are wider than 768px, on smaller screens, the nav links are stacked.

<!--  w  ww  . j av a2  s . c  o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Justified pills -->
    <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>
</div>
</body>
</html>

Click to view the demo

Disable Links inside Pill Components

We can make any link inside the navs to appear as disabled using the class .disabled.

<!--  w w  w .j ava  2 s . c  o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
    <h3>Pills with Disable Links</h3>
    <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>
        <li class="disabled"><a href="#">Admin</a></li>
    </ul>
</div>
</body>
</html>

Click to view the demo