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:
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
Please Login to comment...