Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Dropdowns

Dropdown menus are toggleable, contextual menus for displaying lists of links and more.


Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list of links.

To use dropdown, just wrap the dropdown menu within the .dropdown class.

Run code

Example explained:

The .dropdown class indicates a dropdown menu.

To open dropdown menu, use a button/link with a .dropdown-toggle class and the data-toggle="dropdown" attribute.

Add the .dropdown-menu class to a <div> element to actually build the dropdown menu.

Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.


Split Dropdown Button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Run code

Use .btn-group class when you have more than one button, instead of .dropdown class.

The .btn-group class allows you to group a series of buttons together on a single line.



Dropdown Divider

Add the .dropdown-divider class to separate links inside the dropdown menu with a horizontal border.

Run code

Dropdown Header

You can add a header in any dropdown menu by using the .dropdown-header class.

Run code

Active and Disabled Items

You can customize menus by using .active or .disabled classes to indicate active and disable state of a dropdown item.

Run code

Dropdown Button Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Large Buttons:
Small Buttons:
Run code

Dropdown Directions

Trigger dropdown menus above elements by adding .dropup to the parent element.

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.


Dropdown Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.

Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Run code

Dropdown Menu Offset

Use data-offset attribute to change the location of the dropdown.

Run code

Dropdown Text

The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.

Run code

Dropdown Forms

You can also put a form within a dropdown menu.

Dropdown Forms
Split Dropdown Form
Run code

Grouped Buttons with a Dropdown

We can nest button groups within another button group i.e, place a .btn-group within another .btn-group.

This is done when we want dropdown menus mixed with a series of buttons.

Run code

Vertical Button Group with a Dropdown

We can also nest .btn-group within .btn-group-vertical.

Note: Split button dropdowns are not supported here.

Run code

Complete Bootstrap 4 Dropdown Reference

For a complete reference of all dropdown options, methods and events, visit our Bootstrap 4 JS Dropdown Reference.