Bootstrap 4 Components


A dropdown is a list of items or links that are only displayed when a button or link is clicked. The list is toggleable when the link or button is clicked.

A Simple Dropdown

A dropdown can be created using an <a> element or by using a <button> element.

To create a dropdown first wrap the dropdown button or the link inside .dropdown class, or another element that uses position: relative;. To the link or button that is acting as the toggle element add class .dropdown-toggle and attribute data-toggle=”dropdown”.

All the dropdown items goes inside a <div> with class .dropdown-menu. And each dropdown item whether it be a link or button has class .dropdown-item.

Dropdown using anchor element.

Dropdown using a button.

Note:you can use any variants of buttons using .btn-* classes.

Split Button Dropdowns

We can create a split button dropdown by simply adding the class .dropdown-toggle-split to the button element in a button group.


You can have button dropdown with its default size, smaller size or larger size. For smaller or larger buttons use classes .btn-sm or .btn-lg.

For large button

For small button

Note: you can use different sizing in all button variants and on split button dropdowns.


Use .dropup instead of dropdown on the parent element for the dropdown menu to appear on top of the button.

To align a dropdown menu to the right add class .dropdown-menu-right to .dropdown menu.

Add headers to label sections of actions using in a dropdown menu using .dropdown-header.

Separate menu items into a different section in the same dropdown in a separate div with class .dropdown-divider within dropdown menu.

Disabled Menu Items

Add .disabled to .dropdown-item for disabling the item.