Bootstrap 4 Components
Dropdown
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.
Sizing
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.
Dropup
Use .dropup
instead of dropdown on the parent element for the dropdown menu to appear on top of the button.
Menu Alignment
To align a dropdown menu to the right add class .dropdown-menu-right
to .dropdown
menu.
Menu Headers
Add headers to label sections of actions using in a dropdown menu using .dropdown-header
.
Menu Dividers
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.