Skip to content
Related Articles

Related Articles

Improve Article
Bootstrap 5 Dropdowns
  • Last Updated : 11 Sep, 2020

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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
                crossorigin="anonymous"></script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
                crossorigin="anonymous"></script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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:




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>
        <script src=
                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 upwords.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
              crossorigin="anonymous" />
        <script src=
                integrity=
 "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet"
              integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
                integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>
        <script src=
                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.




<!DOCTYPE html>
<html>
    <head>
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>
        <script src=
                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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :