What are Bootstrap 4 dropdowns?

Dropdowns are ambient overlays that we may toggle to display lists of links and other information. The supplied Bootstrap dropdown JavaScript (JS) plugin makes them interactive. It is an intentional design choice that we toggle them by clicking, rather than hovering over them.

Syntax

The syntax is shown below:

<button data-toggle="dropdown"> items for dropping down_____ </button>

Types

  • Basic dropdown: A basic dropdown has an easy layout. In the basic layout, a menu or list drops down when we click on a button.
  • Border dropdown: In a border dropdown, the items in the dropped list have a divider or border between them. The border separates the lists.
  • Header dropdown: A header dropdown has a header, such as a heading, that acts as the title of the list items. The header does not contain a link. It is like a label for the dropped menu items.

Code

  • HTML
Bootstrap 4 dropdown
Explanation
  • Lines 9 to 16:When we press the "Basic" button, the basic dropdown shows the items. We use the data-toggle attribute with the dropdown value. 
  • Lines 17 to 30: When we press the "Bordered" button, the items in the bordered dropdown are separated from the above items. This is done using a dropdown divider. 
  • Lines 31 to 44: When we press the "Header" button, the dropdown displays the header through the dropdown-header class.
Free Resources
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)