Dropdown & Dropup

tutorial and example
tutorial and example

Bootstrap Dropdowns

The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list.

Before creating dropdown menu, we have to know about its class, that is given below:

  • The .dropdown class is used to indicate a dropdown menu.
  • The .dropwn-menu class is used to create dropdown menu.
  • The .dropdown-toggle and data-toggle=”dropdown” class is used to open the dropdown menu.

Let us see an example of Bootstrap Dropdowns:

Try Now

Bootstrap Dropdown Divider

The bootstrap dropdown divider is used to separate the links inside the dropdown menu with a thin horizontal border.

Let us see an example of Bootstrap Dropdown Divider:

Try Now

Bootstrap Dropdown Header

We can create dropdown header menu by using its class .dropdown-header. We can not select page header while using drowdown header menu. It is like a level that help to understand what is the work.

Let us see an example of Bootstrap Dropdown Header:

Try Now

Bootstrap Disable and Active Items

In bootstrap, we can disable and active items by using its .disabled class.

Let us see an example of Bootstrap Disable and Active Items:

Try Now

Bootstrap Dropdown Position

We can add dropdown position using its class. To create right-align the dropdown, add the .dropdown-menu-right class.

Let us see an example of Bootstrap Disable and Active Items:

Bootstrap Dropup

In Bootstrap, we can create dropdup menu. All the dropdown menu will be show on the top of the menu. We have to change the <div> element with .dropdown class to .dropup.

Let us see an example of Bootstrap Dropup:

Try Now