How to use dropdown in Bootstrap 4

Introduction

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>

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

<div>

<a href="#"> List 1</a>

</div>

</div>

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.

Explanation

• 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.