Bootstrap 4 | Dropdowns - GeeksforGeeks

29 Apr, 2022
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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
ysachin2314
sumitgumber28
sahilintern
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?