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.
Post Your Thoughts