Bootstrap Dropdown


Bootstrap dropdown menu allows uses to select one value from the defined list. Dropdown menu provides fancy and responsive dropdown. You can add toggle effect using the .dropdown-toggle class.


Bootstrap Dropdown Example

Let us understand Dropdown with basic example

Example

Try it »

The above example will produce following example-

Bootstrap dropdown

If you click on the above button it will open the dropdown like this –

Dropdown menu example bootstrap

Bootstrap dropdown class Explaination

  • .dropdown Defines the dropdown menu.
  • .dropdown-toggle Binds the trigger event with the link.
  • .caret Adds the icon which points the dropdown menu.
  • .dropdown-menu is added in unordered list. It contains the list items to create link items.

Bootstrap Dropdown Divider

Dividers are used to separate the two link items in dropdown menu. Class .divider is used to create divider between the two link items.

Example

Try it »

The output of the above example will produce the following output-

Bootstrap divider in dropdown

Bootstrap Dropdown Header

If you want to add headers in dropdown list use the class .dropdown-header class in <li> tag.

Example

Try it »

The output of the above example will produce the following output-

Dropdown header bootstrap


More Examples


Bootstrap Dropdown menu in navigation bar

Here is an example of Dropdown in Navigation bar-

Example

Try it »

The above method will generate the below output-

Dropdown in navbar bootstrap

Bootstrap Dropdown Button Group Example

Here is simple button groups example with dropdown-

Example

Try it »

Following output will be produced-

dropdown in bootstrap button group