Pills with Dropdowns in Bootstrap - GeeksforGeeks

27 Dec, 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.
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="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>  </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
ysachin2314
germanshephered48
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills