Open In App

Bootstrap 4 | Dropdowns

Improve
Improve
Like Article
Like
Save
Share
Report

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:  

HTML




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

HTML




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

HTML




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

HTML




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

HTML




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

HTML




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

HTML




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

Example:  

HTML




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

HTML




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


fropdownOutput: 
 

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:  

HTML




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

HTML




<!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 dropdown list.

Example:  

HTML




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

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 29 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads