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 JS Dropdown

Dropdown CSS Classes

Dropdowns toggle contextual overlays for displaying lists of links.

Class Description
.dropdown Indicates a dropdown menu
.dropdown-item Style links inside the dropdown menu with proper padding etc
.dropdown-item-text Style text or text links inside the dropdown menu with proper padding etc
.dropdown-menu Builds the dropdown menu
.dropdown-menu-right Right-aligns a dropdown menu
.dropdown-header Adds a header inside the dropdown menu
.dropup Indicates a dropup menu
.dropright Indicates a dropright menu
.dropleft Indicates a dropleft menu
.disabled Disables an item in the dropdown menu
.active Styles the active element in a dropdown menu
.dropdown-divider Separates items inside the dropdown menu with a horizontal line

For a tutorial about dropdown, visit our Bootstrap 4 Dropdown Tutorial.


Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item.

The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.


Via data-* Attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown:

Run code

Via JavaScript

Call the dropdowns via JavaScript:

Note: The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.


Dropdown Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-offset="".

Name Type Default Description
offset number | string | function 0

Offset of the dropdown relative to its target.

When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.

flip boolean true Allow Dropdown to flip in case of an overlapping on the reference element.
boundary string | element 'scrollParent' Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only).
reference string | element 'toggle' Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference.
display string 'dynamic' By default, we use Popper.js for dynamic positioning. Disable this with static.

Dropdown Methods

The following table lists all available dropdown methods:

Method Description
$().dropdown('toggle') Toggles the dropdown menu of a given navbar or tabbed navigation
$().dropdown('show') Shows the dropdown menu of a given navbar or tabbed navigation
$().dropdown('hide') Hides the dropdown menu of a given navbar or tabbed navigation
$().dropdown('update') Updates the position of an element’s dropdown
$().dropdown('dispose') Destroys an element’s dropdown

Dropdown Events

The following table lists all available dropdown events:

Event Description Example
show.bs.dropdown This event fires immediately when the show instance method is called. Demo
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). Demo
hide.bs.dropdown This event is fired immediately when the hide instance method has been called. Demo
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). Demo