Open In App

Pills with Dropdowns in Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Final 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


Last Updated : 27 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads