Bootstrap 5 Dropdowns - GeeksforGeeks

09 Feb, 2022
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. 
Syntax:
<div class="dropdown"> Contents... <div>
Example 1: This example uses show the working of dropdown with button in Bootstrap 5.
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous">      </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>    <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success dropdown-toggle"                        data-toggle="dropdown">                    Select CS Subjects                </button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Dropdown Divider: The .dropdown-divider class is used to divide the dropdown menu list by using thin horizontal line. This example shows the working of collapsible cards in Bootstrap 5.
  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Subjects                </button>                <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                     <div class="dropdown-divider"></div>                    <a class="dropdown-item"                       href="#">Physics</a>                    <a class="dropdown-item"                       href="#">Mathematics</a>                    <a class="dropdown-item"                       href="#">Chemistry</a>                </div>            </div>        </div>    </body></html>
Output:
Dropdown Header: The .dropdown-header class is used to add header section inside the dropdown list.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous">      </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Subjects                </button>                 <div class="dropdown-menu">                    <strong class="dropdown-header">                      CS Subjects</strong>                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                     <div class="dropdown-divider"></div>                    <strong class="dropdown-header">                      Other Subjects</strong>                    <a class="dropdown-item"                       href="#">Physics</a>                    <a class="dropdown-item"                       href="#">Mathematics</a>                    <a class="dropdown-item"                       href="#">Chemistry</a>                </div>            </div>        </div>    </body></html>
Output:
Disable and Active items: The .active class is used to add the highlight the list items. The .disabled class is used to disable the list of items.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Subjects                </button>                 <div class="dropdown-menu">                    <a class="dropdown-item active"                       href="#">Data Structure</a>                    <a class="dropdown-item disabled"                       href="#">Algorithm</a>                    <a class="dropdown-item active"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Dropdown Position: The .dropright and .dropleft classes are used to set the position of dropdown list in left and right side.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous">      </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown dropright">                <button type="button"                        class="btn btn-success dropdown-toggle"                        data-toggle="dropdown">                    Select Subjects                </button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Example 2:  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous">      </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown dropleft">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Subjects                </button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Dropdown Menu Right Aligned: The .dropdown-menu-right class is used to set the right-align of the dropdown menu.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Computer Science Subject from List                </button>                 <div class="dropdown-menu dropdown-menu-right">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Dropup: The .dropup class is used instead of .dropdown class to expand the menu list in upwards.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous">      </script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropup"                 style="margin-top: 180px;">                <button type="button"                        class="btn btn-success                               dropdown-toggle"                        data-toggle="dropdown">                    Select Subject                </button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Data Structure</a>                    <a class="dropdown-item"                       href="#">Algorithm</a>                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>        </div>    </body></html>
Output:
Dropdown Text: The .dropdown-item-text class is used to add plain text in the dropdown menu list.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="dropdown">                <button type="button"                        class="btn btn-success dropdown-toggle"                        data-toggle="dropdown">                    Select Subject                </button>                 <div class="dropdown-menu">                    <div class="dropdown-item-text">                      Data Structure</div>                    <div class="dropdown-item-text">                      Algorithm</div>                    <div class="dropdown-item-text">                      Operating System</div>                    <div class="dropdown-item-text">                      Another Text</div>                </div>            </div>        </div>    </body></html>
Output:
Grouped Buttons with a Dropdown: The .btn-group class is used to create a group of buttons and the .dropdown-menu class is used to create a dropdown list.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="btn-group">                <button type="button"                        class="btn btn-success                               btn-primary">                    Programming                </button>                 <button type="button"                        class="btn btn-success                               btn-primary">                    Theory                </button>                 <div class="btn-group">                    <button type="button"                            class="btn btn-success dropdown-toggle"                            data-toggle="dropdown">                        Select Subject                    </button>                     <div class="dropdown-menu">                        <div class="dropdown-item-text">                          Data Structure</div>                        <div class="dropdown-item-text">                          Algorithm</div>                        <div class="dropdown-item-text">                          Operating System</div>                        <div class="dropdown-item-text">                          Computer Networks</div>                    </div>                </div>            </div>        </div>    </body></html>
Output:
Split Button Dropdowns: The .dropdown-toggle-split class is used to split the dropdown buttons.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous">      </script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="btn-group">                <button type="button"                        class="btn btn-success                               btn-primary">                    Programming                </button>                <button type="button"                        class="btn btn-success                               dropdown-toggle                               dropdown-toggle-split"                        data-toggle="dropdown">              </button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">C Programming</a>                    <a class="dropdown-item"                       href="#">C++ Programming</a>                    <a class="dropdown-item"                       href="#">Java Programming</a>                </div>            </div>             <div class="btn-group">                <button type="button"                        class="btn btn-success                               btn-primary">                    Theory                </button>                 <button type="button"                        class="btn btn-success                               dropdown-toggle                               dropdown-toggle-split"                        data-toggle="dropdown"></button>                 <div class="dropdown-menu">                    <a class="dropdown-item"                       href="#">Operating System</a>                    <a class="dropdown-item"                       href="#">Computer Networks</a>                </div>            </div>             <div class="btn-group">                <button type="button"                        class="btn btn-success                               btn-primary">                    Select Subject                </button>                 <button type="button"                        class="btn btn-success                               dropdown-toggle                               dropdown-toggle-split"                        data-toggle="dropdown"></button>                 <div class="dropdown-menu">                    <div class="dropdown-item">                      Data Structure</div>                    <div class="dropdown-item">                      Algorithm</div>                    <div class="dropdown-item">                      Operating System</div>                    <div class="dropdown-item">                      Computer Networks</div>                </div>            </div>        </div>    </body></html>
Output:
Vertical Button Group Dropdown List: The .btn-group-vertical class is used to create vertical button group with fropdown list.  
HTML
<!DOCTYPE html><html>    <head>        <!-- Load Bootstrap -->        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"              crossorigin="anonymous" />        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"                crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"                integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"                crossorigin="anonymous"></script>    </head>     <body style="text-align: center;">        <div class="container mt-3"             style="width: 700px;">            <h1 style="color: green;">                GeeksforGeeks            </h1>            <div class="btn-group-vertical">                <div class="btn-group dropright">                    <button type="button"                            class="btn btn-success                                   btn-primary">                        Programming                    </button>                    <button type="button"                            class="btn btn-success                                   dropdown-toggle                                   dropdown-toggle-split"                            data-toggle="dropdown"></button>                     <div class="dropdown-menu">                        <a class="dropdown-item"                           href="#">C Programming</a>                        <a class="dropdown-item"                           href="#">C++ Programming</a>                        <a class="dropdown-item"                           href="#">Java Programming</a>                    </div>                </div>                 <div class="btn-group dropright">                    <button type="button"                            class="btn btn-success                                   btn-primary">                        Theory                    </button>                     <button type="button"                            class="btn btn-success                                   dropdown-toggle                                   dropdown-toggle-split"                            data-toggle="dropdown">                  </button>                     <div class="dropdown-menu">                        <a class="dropdown-item"                           href="#">Operating System</a>                        <a class="dropdown-item"                           href="#">Computer Networks</a>                    </div>                </div>            </div>        </div>    </body></html>
Output:
sumitgumber28
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to pass data into a bootstrap modal?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?