Bootstrap Dropdowns

Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown list items. You have to click on the dropdown to toggle; it does not toggle by hover the cursor on the dropdown.

The dropdown is developed on Popper.js, which is a third party library that provides dynamic state and viewport detection. It is necessary to add popper.min.js CDN link before bootstrap javascript CDN link, or you can use bootstrap.bundle.min.js / bootstrap.bundle.js which has Popper.js library.

The bootstrap dropdowns are designed in such a way that can be applied in multiple situations and markup structure. In complex navigational systems, the dropdown provides the facility to place almost all the important links in the navigation bar. We can also make dropdowns that have additional inputs (search fields) and form controls (login forms.)

Basic Dropdown

You can convert any button into a dropdown menu by making some markup changes in it.

Steps for creating a dropdown button

  • Add .dropdown class to  <div> element to make the dropdown menu.
  • Add .btn class along with the contextual class , .dropdown-toggle class, and data-toggle=”dropdown” attribute to <button> element (immediate child of div) to open the dropdown menu.
  • Add .dropdown-menu class to the  <div> element for creating a list or menu.
  • Add the .dropdown-item class to <a> element  for list items.

Example

Output

Bootstrap 4 Dropdowns

Split Button Dropdown

Split button dropdown comprises of proper spacing and a thin horizontal line for separatinf the links. The .dropdown-toggle-split class is used to make the split button dropdown.

Example

Output

Bootstrap 4 Dropdowns

Disabled and Active items

We can also customize the links or list items of the dropdown by using the two predefined classes which are .active class and .disabled class.

The .active class is used to highlight the list items. This class adds the blue background color (primary contextual color) the list items that we want to make active or highlight.

The .disabled class makes the list item disabled and it changes the text color of the list item to light gray.

Example

Output

Bootstrap 4 Dropdowns

Dropdown Header – Bootstrap 4 offers a class that helps in classifying the list items by adding header or label in the dropdown menu. You can create the dropdown header by adding .dropdown-header class to the <div> element.

Example

Output

Bootstrap 4 Dropdowns

Dropdown Position – We can also set the position of the arrow/caret to the left or right as per our need. The position of the arrow/caret will automatically change according to the class but the dropdown menu will always remains on the right. If we create the dropleft menu then the arrow/caret will on the left of the dropdown button (before the text) and if we create the dropright menu then the arrow/caret will be on the right of the dropdown (after the text).

  • Add the .dropright along with the .dropdown class to the <div> element then the dropdown arrow/caret  will appear on the right.
  • Add the .dropleft class along with the .dropdown class to the <div> element then the dropdown arrow/caret will appear on the left.

Example

This example shows the dropright arrow/caret position:

Output           

Bootstrap 4 Dropdowns

This example shows dropleft arrow/caret position:

Output

Bootstrap 4 Dropdowns

Dropdown Menu Right/Left Aligned – The dropdown menu left/right aligned is similar to the dropdown position but the difference is that the arrow/caret will always be on the right side of the dropdown button.  We only change the alignment of the dropdown menu to the left or right.

  • Add the .dropdown-menu-right class to align the dropdown menu on the right.

Example

Output

Bootstrap 4 Dropdowns
  • Add  the .dropdown-menu-left class to align the dropdown menu on the left.

Example

Output

Bootstrap 4 Dropdowns

Dropup – The dropup is used when we want the dropdown menu to get open in the upward direction instead of downwards. To create a dropup we have to use the .dropup class instead of .dropdown class to the <div> element.

Example

Output

Bootstrap 4 Dropdowns

Dropdown Text – In the dropdown text, we can add simple text to the dropdown menu. We can also provide the link to the text for basic styling. The class that is used to add plain text to the dropdown menu is .dropdown-item-text.

Example

Output

Bootstrap 4 Dropdowns

Grouped Button with Dropdown – We can create horizontal/vertical grouped buttons by adding a series of buttons along with the dropdown button. The .btn-group class is used to create the group buttons, and the .dropdown-menu class is used to create the dropdown menu.

Example – For horizontal grouped button with dropdown.

Output

Bootstrap 4 Dropdowns

Example – For vertical grouped button with dropdown.

Output

Bootstrap 4 Dropdowns

Pin It on Pinterest

Share This