Bootstrap 4 Dropdowns


Basic Dropdowns

Dropdown is a toggleable menu that allows you to select a value from a predefined list. To use it in Bootstrap, add a .dropdown class. To use it in Bootstrap, follow the procedure below:

  1. All you have to do is create a <div> and add a .dropdown class.
  2. Then create a <button> and add the <.dropdown-toggle> class. Add data-toggle = "dropdown" to it.
  3. Then create <div> again and add .dropdown-menu class. This div creates a dropdown menu.
  4. If you want to create a link or button inside the .dropdown-menu, add the .dropdown-item class to the class of that link or button.

Example code

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
</div>

Dropdown With Header

To create a header inside the dropdown, add the .dropdown-header class inside the .dropdown-menu div.

Example code

<div class="dropdown-header">Dropdown header</div>

Dropdown With Divider

In a dropdown, a divider refers to a horizontal border that separates two links. To use it, you need to add a .dropdown-divider class.

Example code

<div class="dropdown-divider"></div>

Dropdown with dropright

If the button is to open on the right side of the dropdown menu, you need to add the .dropright class along with the .dropdown class.

Example code

<div class="dropdown dropright">...</div>

Dropdown with dropleft

If the button is to open on the left side of the dropdown menu, you need to add the .dropleft class along with the .dropdown class.

Example code

<div class="dropdown dropleft">...</div>

Dropdown with dropup

If the button is to open on the top side of the dropdown menu, you need to add the .dropup class along with the .dropdown class.

Example code

<div class="dropdown dropup">...</div>

Dropdown with right aligned

If you want to right align the dropdown menu, you need to add the .dropdown-menu-right class with the .dropdown-menu class.

Example code

<div class="dropdown-menu dropdown-menu-right">...</div>

Dropdown Active and Disable Items

If you want to highlight any items inside the dropdown menu, you need to add the .active class along with the .dropdown-item class.

If you want to un-clickable an item inside the dropdown menu, you need to add a .disabled class with the .dropdown-item class.

Example code

<a href="#" class="dropdown-item active">First item</a>
<a href="#" class="dropdown-item disabled">Second item</a>

Dropdown with Plain Text

If you want to convert a link or element to plain text in the dropdown menu, you need to add a .dropdown-item-text class to the class of that link or element.

Example code

<a href="#" class="dropdown-item-text">Link item</a>
<span class="dropdown-item-text">Just Text</span>

Split Button Dropdowns

Example code

<button class="btn btn-primary">Dropdown</button>
<button class="btn-primary btn dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>

Dropdown in Navbar

Example code

<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown active">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</nav>