Bootstrap 5 UI Tutorial

Build fast, responsive sites with Bootstrap 5

Chapter Quiz Exercises
Course Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities

BS5 Dropdowns

Bootstrap 5 Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

How To Create A Dropdown

  • Wrap the dropdown inside a .dropdown class.
  • Use a button or a link with .dropdown-toggle and data-bs-toggle="dropdown" to open it.
  • Add the .dropdown-menu class to a <ul> element to actually build the menu.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code
Result
Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities