Bootstrap Dropdowns

The dropdown menus can be stylised and controlled better using the contextual classes provided by Bootstrap.

Basic Dropdown

It is well known that dropdown menu is basically a list of toggleable options from which you can choose anyone.

The basic dropdown menu in Bootstrap can be created using below code:

  • The basic contextual class for dropdown menu in Bootstrap is the .dropdown class
  • For a working dropdown you basically need a button with class .dropdown-toggle along with the attribute data-toggle=”dropdown”
  • Use the .caret class to put an arrow icon on the dropdown button. This icon is to indicate that the button is acting as a dropdown. You can also use .caret.caret-up for “dropup” menus (to be discussed later)
  • The dropdown ‘menu’ part can be built by using .dropdown-menu class to a <ul> element

Dropdown Divider

A horizontal thin border can be added to separate some menu items in the dropdown menu using the .divider class, like:

Dropdown Header

Use the .dropdown-header contextual class to add headers for the dropdown menu. The sample code:

Disable and Active items

The .active class adds a blue background color that can be used to highlight the selected option from the drop-down. Similarly, you can disable an item in the dropdown menu using the .disabled class. The .disabled class will basically get a light-grey text color along with a “no-parking-sign” icon for hover event. Observer the below code for better understanding:

Dropdown Position

The horizontal alignment of the dropdown can be done using contextual class .dropdown-menu-right class. You add this class to the dropdown element with .dropdown-menu:

Dropup

You can also make the dropdown menu to expand upwards. Using class= “dropup” attribute will make the dropdown menu open in upward direction instead of downwards. For example:

Via data-* Attributes

An alternative way of creating dropdown in Bootstrap is by using the data-* class. Here, the attribute data-toggle=”dropdown” can be added to a link or a button to make it toggle a dropdown menu.

Dropdown Methods

Bootstrap 4 has only one method for the .dropdown class which is:

  • .dropdown(“toggle”)

The method basically just makes sure that the dropdown is toggle-able

Dropdown Events

Here’s a list of events provided by bootstrap for the dropdown menu element:

  • bs.dropdown: The event for the dropdown when it is just about to be shown
  • bs.dropdown: The event for the dropdown when it is fully visible and the CSS transitions are also completed.
  • bs.dropdown: The event for the dropdown when it is just about to be hidden
  • bs.dropdown: The event for the dropdown when it is fully hidden and the CSS transitions are also completed.

Dropdown Contextual Classes

Here’s a list of all the contextual classes used with the dropdown element:

  • .dropdown
  • .dropdown-menu
  • .dropdown-menu-right
  • .dropdown-header
  • .dropup
  • .disabled
  • .divider