In Bootstrap 4 Dropdowns Tutorial With Example, you will learn how to use dropdowns in Bootstrap 4. The JavaScript is included with a default Bootstrap JS file, and you can use it simply by adding the CSS classes no further JavaScript required. There is so many difference between bootstrap 3 and Bootstrap 4.
Bootstrap 4 Dropdowns Tutorial With Example
Bootstrap 4 includes a component for adding dropdown menus. A dropdown is a toggleable menu, which allows you to place more options on the menu without cluttering the interface. It works based on a Popper.js script. You should add jQuery, popper.min.js and then bootstrap.min.js in the same sequence.
#1: Bootstrap 4 Dropdown
The dropdown menu is used inside the navigation header to display a list of related links when a user mouse hovers or click on the trigger element.
To create a basic dropdown, first needs you to create a button with the classes .btn and .dropdown-toggle, also, .data-toggle attribute with a value .dropdown.
Next, creating a <div> container with the class .dropdown-menu, inside which there should be <a> elements links which have the class .dropdown-item.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Basic Dropdown</h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown will look like below screenshot.
#2: Bootstrap 4 Dropdown Divider
A dropdown divider is related to the <hr /> tag in the sense that it creates a thin horizontal line, but it goes inside a dropdown menu. To create a dropdown divider, you simply want to create a <div> container with the class .dropdown-divider inside a dropdown menu container, between the links you’d like to separate with a thin horizontal border.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Divider</h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">1</a> </div> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown divider will look like below screenshot.
#3: Bootstrap 4 Dropdown Header
To create a dropdown header, you create a <div> container and applying a .dropdown-header class to it, inside a .dropdown-menu container.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Header</h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> <div class="dropdown-header">Option</div> <a class="dropdown-item" href="#">1</a> </div> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown header will look like below screenshot.
#4: Bootstrap 4 Dropdown Active/Disabled Items
To make an item inside a dropdown menu appear active you will need to apply the .active class and to disable an item, you need to apply the .disabled class.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Active/Disabled Items</h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item active" href="#">Active Item</a> <a class="dropdown-item" href="#">Normal Item</a> <a class="dropdown-item disabled" href="#">Disabled Item</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown Active/Disabled Item will look like below screenshot.
#5: Bootstrap 4 Dropdown Left/Right
You can create a dropright or dropleft menu, by adding the .dropright or .dropleft class to the dropdown element.
Note that the caret/arrow is added automatically.
Example of Right Position
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Right Position</h2> <div class="dropdown dropright"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown right position will look like below screenshot.
Example of Left Position
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Left Position</h2> <div class="dropdown dropleft float-right"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown left position will look like below screenshot.
#6: Bootstrap 4 Dropdown Menu Right
To create the dropdown appear from the right corner of the button if you use the .dropdown-menu-right with the class .dropdown-menu.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Dropdown Menu Right</h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown menu right will look like below screenshot.
#7: Bootstrap 4 Dropup
If you require the dropdown menu to expand upwards instead of downwards, change the <div> element with a class dropdown to dropup.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h2>Dropup</h2> <br> <div class="dropup"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropup button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown dropup will look like below screenshot.
#8: Bootstrap 4 Dropdown Text
A .dropdown-item-text class is used to add plain text to the dropdown item or used on links for default link styling.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h2>Dropdown Text</h2> <br> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropup button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> <a class="dropdown-item-text" href="#">Link</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown text will look like below screenshot.
#9: Bootstrap 4 Grouped Buttons with Dropdown
You can also nest button groups to create dropdown menus.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h2>Dropdown Button Groups</h2> <br> <div class="btn-group"> <button type="button" class="btn btn-success">Honda</button> <button type="button" class="btn btn-success">Hyundai</button> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Suzuki </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">1</a> <a class="dropdown-item" href="#">2</a> </div> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown button group will look like below screenshot.
#10: Bootstrap 4 Split Button Dropdowns
You can create split dropdown menus with button groups.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h2>Dropdown Split Buttons</h2> <br> <div class="btn-group"> <button type="button" class="btn btn-warning">Button</button> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">1</a> <a class="dropdown-item" href="#">2</a> </div> </div> </div> </body> </html>
The example of Bootstrap dropdown split buttons will look like below screenshot.
#11: Bootstrap 4 Vertical Button Group With Dropdown
You can create vertical split dropdown menus with button groups.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Dropdowns Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h2>Vertical Button Group Dropdown</h2> <br> <div class="btn-group-vertical"> <button type="button" class="btn btn-warning">AB</button> <button type="button" class="btn btn-warning">CD</button> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">EF</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">1</a> <a class="dropdown-item" href="#">2</a> </div> </div> </div> </body> </html>
The example of Bootstrap vertical split buttons dropdown will look like below screenshot.
At last, our Bootstrap 4 Dropdowns Tutorial With Example is over.

Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.