Home » bootstrap » Bootstrap Dropdowns

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
Please follow and like us:
error