Examples
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
.dropdown, or another element that declares
position: relative;. Dropdowns can be triggered from
< a > or < button > elements to better fit
your potential needs. The examples shown here use semantic
< ul > elements where appropriate, but custom markup is supported.
Single button
Any single .btn can be turned into a dropdown toggle
with some markup changes. Here’s how you can put them to work with
either < button > and with < a > elements:
Split 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.
Dropup
Trigger dropdown menus above elements by adding
.dropup to the parent element.
Dropright
Trigger dropdown menus at the right of the elements by adding
.dropend to the parent element.
Dropleft
Trigger dropdown menus at the left of the elements by adding
.dropstart to the parent element.