Bootstrap 4 | Dropdowns

Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. The .dropdown class is used to design the drop-down menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Dropdown List</h2>
      
        <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>                    

chevron_right


Output:

Dropdown Divider: The .dropdown-divider class is used to divide the dropdown menu list by using thin horizontal line.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Dropdown Divider List</h2>
      
        <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>                    

chevron_right


Output:

Dropdown Header: The .dropdown-header class is used to add header section inside the dropdown list.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h2>Dropdown Header List</h2>
      
        <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>                    

chevron_right


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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropdown Disable and Active items List</h3>
      
        <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>                    

chevron_right


Output:

Dropdown Position: The .dropright and .dropleft classes are used to set the position of dropdown list in left and right side.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropdown Right items List</h3>
      
        <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>                    

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropdown Left items List</h3>
      
        <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>                    

chevron_right


Output:

Dropdown Menu Right Aligned: The .dropdown-menu-right class is used to set the right-align of the dropdown menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropdown Menu Right Aligned</h3>
      
        <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>                    

chevron_right


Output:

Dropup: The .dropup class is used instead of .dropdown class to expand the menu list in upwords.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <br><br><br><br>
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropup List</h3>
      
        <div class="dropup">
          
            <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>                    

chevron_right


Output:

Dropdown Text: The .dropdown-item-text class is used to add plain text in the dropdown menu list.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Dropdown Text</h3>
      
        <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">Computer Networks</div>
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Grouped Buttons with a Dropdown</h3>
          
        <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>                    

chevron_right


Output:

Split Button Dropdowns: The .dropdown-toggle-split class is used to split the dropdown buttons.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Split Button Dropdown List</h3>
          
        <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>                    

chevron_right


Output:

Vertical Button Group Dropdown List: The .btn-group-vertical class is used to create vertical button group with fropdown list.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Dropdowns List</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
      
    <div class="container">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1
          
        <h3>Vertical Button Group Dropdown List</h3>
          
        <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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.