Skip to content
Related Articles

Related Articles

Bootstrap 4 | Dropdowns
  • Last Updated : 31 May, 2019

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:




<!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>                    

Output:

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

Example:






<!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>                    

Output:

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

Example:




<!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>                    

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:




<!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>                    

Output:

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



Example 1:




<!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>                    

Output:

Example 2:




<!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>                    

Output:

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

Example:




<!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>                    

Output:

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

Example:




<!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>                    

Output:

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

Example:




<!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>                    

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:




<!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>                    

Output:

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

Example:




<!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>                    

Output:

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

Example:




<!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>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :