Basic Dropdown
Use the dropdown
, dropdown-toggle
and dropdown-menu
classes to create a basic dropdown.
Dropdown Button
Use btn btn-{color}
with the dropdown-toggle
class to create a dropdown button.
Outlined Dropdown Button
Use btn btn-outline-{color}
with the dropdown-toggle
class to create a dropdown button.
Split Dropdown
You can create a split dropdown button with the btn-group
class.
Dropdown Position
You can create a dropdown button with different position. Just add the [--placement:*]
attribute with the dropdown
class. The available placements are top
, top-left
, top-right
, bottom
, bottom-left
, bottom-right
, left
, left-left
, left-right
, right
, right-left
and right-right
.
Dropdown Size
You can create a small, medium, large or extra large dropdown button. Just add the btn-xs
, btn-sm
, btn-md
, btn-lg
or btn-xl
along with the btn
class.