Bootstrap 5 Learning Kit – Practice – Components: Dropdowns

Dropdowns

Button

First item Second item Third item

Link

First item Second item Third item

Split button

First item Second item Third item

Sizing

First item Second item Third item

First item Second item Third item

First item Second item Third item

Dark

First item Second item Third item

In navbar component

Direction

First item Second item Third item

First item Second item Third item

First item Second item Third item

Alignment

First item Second item Third item

Responsive alignment

To right-align the dropdown menu for the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-end.

First item Second item Third item

To left-align the dropdown menu for the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl}-start.

First item Second item Third item

Button items

Active item

First item Second item Third item

Disabled item

First item Second item Third item

Header

Dropdown header

First item Second item Third item

Divider

First item Second item

Text item

Dropdown text item Second item Third item

Reference

First item Second item Third item

Offset

First item Second item Third item

Auto close

First item Second item Third item

First item Second item Third item

First item Second item Third item

First item Second item Third item