Javatpoint Logo
Javatpoint Logo

Bootstrap Dropdowns

Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin.

You have to wrap dropdown menu within the class .dropdown to create Bootstrap Dropdown.

Bootstrap Dropdown Example

Test it Now

Bootstrap Dropdown Divider

The class .divider is used to separate links inside the dropdown menu:

See this example:

Test it Now

Bootstrap Dropdown Header

The class .dropdown-header is used to add headers inside the dropdown menu.

See this example:

Test it Now

Bootstrap Dropdown: Disable an item

Use the class .disabled to disable an item in the dropdown menu.

See this example:

Test it Now

Bootstrap 4 Disable and Active Items

To make an item active, highlight a specific dropdown item with the .active class (active item is appeared with a blue background color).

To disable an item in the dropdown menu, you have to use the .disabled class (It makes a light-grey text color and a "no-parking-sign" icon on hover).

Example:

Test it Now

Dropdown Position

It is used to position the dropdown items. By default dropdown is positioned at left. You can right-align the dropdown by adding the .dropdown-menu-right class to the element with .dropdown-menu.

Example:

Test it Now

Bootstrap 4 Dropup

If you want the dropdown menu to expand upwards instead of downwards, change the

element with class="dropdown" to "dropup":

Example:

Test it Now

Split Button Dropdowns

It is used to show dropdowns as split buttons. Here we use all contextual classes.

Example:

Test it Now
Next Topicbootstrap Collapse




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA