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