Bootstrap 4 Dropdowns Tutorial With Example

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

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.