Dropdown button basics in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dropdown button in Bootstrap?

A dropdown button in Bootstrap is a button that shows a list of options when clicked. It helps save space and organizes choices neatly.

beginner

Which Bootstrap class is used to create a dropdown container?

The class dropdown is used to create a container for dropdown buttons and their menu items.

beginner

How do you make a button toggle a dropdown menu in Bootstrap?

Add data-bs-toggle="dropdown" attribute to the button and give it the class btn dropdown-toggle.

beginner

What HTML element holds the dropdown menu items in Bootstrap?

A <ul> or <div> with the class dropdown-menu holds the dropdown items.

intermediate

How do you make dropdown items accessible for keyboard users?

Use <a> or <button> elements inside the dropdown menu with proper focus styles and roles.

Which class do you add to a button to make it a dropdown toggle in Bootstrap?

A dropdown-toggle

B btn-toggle

C dropdown-button

D btn-menu

The class dropdown-toggle makes the button show the dropdown menu when clicked.

What attribute must be added to a button to enable Bootstrap's dropdown functionality?

A toggle="dropdown"

B data-toggle="dropdown"

C data-bs-toggle="dropdown"

D dropdown="true"

Bootstrap 5 uses data-bs-toggle="dropdown" to activate dropdown toggling.

Which class is used for the container that holds dropdown menu items?

A menu-dropdown

B menu-items

C dropdown-list

D dropdown-menu

The class dropdown-menu styles and positions the dropdown list.

What HTML element is commonly used for each dropdown item?

A <p>

B <a>

C <span>

D <div>

Dropdown items are usually links (<a>) so they can be focused and clicked.

Why is it important to use semantic elements like <a> or <button> inside dropdown menus?

A For better accessibility and keyboard navigation

B To make the menu look colorful

C To reduce file size

D To disable the dropdown

Using semantic elements helps screen readers and keyboard users interact with the dropdown.

Explain how to create a basic dropdown button using Bootstrap.

Think about the container, the button, and the menu structure.

Describe why accessibility matters in dropdown buttons and how Bootstrap supports it.

Consider users who use keyboard or screen readers.