Bootstrap Pills

In last article we saw ho to create menus with tabs. This article focuses on creating menus with Bootstrap pills. Pills derive their name from their pill-shaped structure. To create a menu based on bootstrap pills add “nav” and “nav-pills” classes to the opening tag of the un-ordered list. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="nav nav-pills nav-justified">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            
    </body>

</html>

Download the code Try the code

If you open the above page in browser you should see a horizontal menu stretched to cover whole width of container. This is because the class “nav-justified” has been added to the opening “ul” tag. Take a look at the “About” list item. This is active by default. However, unlike tab, it has a blue background and white text. However, In case of tabs the active element was selected in the form of tab and no background and text color was changed.

Vertical Pills Menu

You can also create a manu where pills are vertically arranged. To do so, simply “nav-stacked” to the opening tag of the “ul” element. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            
    </body>

</html>

Download the code Try the code

If you open the above code in browser, you should see a menu where list item are arranged in vertical manner. Notice that the menu takes whole width of the parent element. Also, the active item i.e. “About” is highlighted in pill style.

Bootstrap Pills with Dropdown Menu

Like tabs, it is possible to create dropdown menus with bootstrap pills. To do so, add a class “dropdown” to the parent list item. Next, add “dropdown-toggle” class to the link or button inside the list. Also, add “data-toggle” attribute with value “dropdown” to the link. Finally add class “dropdown-menu” to the list which you want to show or hide by clicking the link. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="nav nav-pills">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Service 1</a></li>
                      <li><a href="#">Service 2</a></li>
                      <li><a href="#">Service 3</a></li> 
                    </ul>
                  </li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
               
              </ul>
            
    </body>

</html>

Download the code Try the code

<<< Bootstrap TabsBootstrap Navbar Basics >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .