Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pills with Dropdowns in Bootstrap

  • Last Updated : 30 Aug, 2021

Bootstrap provides various options for improving the navigation of the content. Bootstrap dropdowns are the toggleable menu for displaying a list of data, made interactive with the JavaScript plugin. We can toggle the list by clicking. Along with this, we can use bootstrap component pills with a dropdown with the bootstrap menu as pills which makes it possible to display.

We use .nav-pills class to display the Bootstrap menu options like pills. We need to add .nav-pills class to the <ul> element in order to display the Bootstrap menu options like pills. Below is the procedure to implement pills with the dropdown in bootstrap.

Step by Step Guide to implement Pills with Dropdown in Bootstrap:

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

  
 



<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”> 
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> 
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script> 
 

 

Step 2: Add .nav-pills class in <ul> tag after the .nav class

 

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Menu 1 <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

 

We have now successfully implemented bootstrap dropdown with pills.

 

Fonal Code:

 

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Dropdown with Pills</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--Include bootstrap , CSS and jQuery CDN-->
    <link
      rel="stylesheet"
      href=
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <div class="container">
      <h3>Pills With Dropdown Menu</h3>
 
      <!--Include .nav-pills class after
          .nav class in <ul> tag-->
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <!--Include dropdown list here-->
        <li class="dropdown">
          <a class="dropdown-toggle"
            data-toggle="dropdown" href="#">
            Menu 1
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Submenu 1-1</a></li>
            <li><a href="#">Submenu 1-2</a></li>
            <li><a href="#">Submenu 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </div>
  </body>
</html>

Output:

Pills with dropdown menu

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!