Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags


How to use dropdown in Bootstrap 4

Akande Olalekan Toheeb


A dropdown is a menu that allows a user to choose from a list of predefined options. It is toggleable.

Bootstrap 4 comes with predefined classes that can be used to set up a dropdown menu. These classes make it easy to create a dropdown with bootstrap.

How to create a dropdown in Bootstrap 4

Creating a dropdown with Bootstrap 4 is not a very tiring task. Still, a beginner may get stuck since the dropdown may not work if the code isn’t written well. Below is a step-by-step guide to creating a functioning Bootstrap 4 dropdown.

  • Step 1: Create a div with class .dropdown. This div is the container that will hold the menu list and the button to access the list.

  • Step 2: Create a button with the class .dropdown-toggle and data-toggle = "dropdown". This button is used to access the dropdown once it is set up.

  • Step 3: Create a div with class .dropdown-menu. This container will hold our menu list. Each item in the list will have the class .dropdown-item.

<div class="dropdown">

<button type="button" class="dropdown-toggle" data-toggle="dropdown"> Button </button>

<div class="dropdown-menu">

<a class="dropdown-item" href="#"> List 1</a>



We can easily set up a dropdown with the steps given above.

Note: Dropdown-divider is a thin horizontal border used to separate links inside the menu. It is set up by creating a div with class .dropdown-divider.


  • Line 10: We set up a div with class .dropdown. This container holds the dropdown.
  • Line 11: We set up a button. It has the classes dropdown-toggle and data-toggle="dropdown", which enable it to control the dropdown menu that follows.
  • Line 13: We set up a div with class .dropdown-menu. It holds the menu lists.
  • Lines 14-18: We set up the items of the dropdown, with each item having a class .dropdown-item.
  • Line 17: We set up a dropdown-divider that separates the last item.




Akande Olalekan Toheeb

View all Courses

Keep Exploring