Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
bootstrap

How to use dropdown in Bootstrap 4

Akande Olalekan Toheeb

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

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

RELATED TAGS

communitycreator
bootstrap

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring