Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're toggled by clicking, not by hovering.
Encapsulate the dropdown button in <div> </div> element with class drowdown. Add class dropdown-toggleand attribute data-toggle="dropdown" to the <button> </button> element. Enclose links in another <div> </div> element with class dropdown-menu. Create links using <a> element with class dropdown-item.
By default the dropdown button is collapse (closed). If you would like the dropdown to be expanded by default then add the class open to the overarching <div> </div> element in which we specified class drowdown.
In the example below:
I have used Bootstrap's Grids by adding class row to the overarching <div> </div> element in which class drowdown is specified. I further added a new <div> </div> element encapuslating the toggle button. In this div I specified the columns (col-sm-2) and the column offsets (col-sm-offset-2) to center the dropdown in the middle of the page.
In the second drop down:
I put the menu items under their custom menu headings. I did that by using <h6> </h6> element but that doesn't matter as long as you have class dropdown-header in that element. In other words you can use any header element (h1 thru h6). You could also put the menu heading in the <p> </p> element; it will work but will increase the padding at the bottom.
In the third drop down:
I used dividers to separate the menu items which I did by adding an additional <div> </div> element with class dropdown-divider.
I also disabled one of the menu items by adding class disabled to the <a> element.