Dropdown button basics in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap dropdown button code?

Given the following HTML code using Bootstrap 5, what will the user see when the page loads?

Bootsrap

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Choose an option
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

A A blue button labeled 'Choose an option' with a downward arrow. The dropdown menu is hidden until clicked.

B A list of three options visible on the page with no button.

C A red button labeled 'Choose an option' with no dropdown functionality.

D A blue button labeled 'Choose an option' with the dropdown menu always visible below it.

💡 Hint

Think about how Bootstrap dropdown buttons behave by default before interaction.

Bootstrap dropdown buttons show a button with a label and a downward arrow. The menu is hidden initially and appears only when the button is clicked.

❓ accessibility

intermediate

Which attribute improves accessibility for this Bootstrap dropdown button?

Consider this button element in a Bootstrap dropdown: Which attribute should be added to improve screen reader accessibility?

A data-toggle="dropdown"

B aria-expanded="false"

C role="button"

D tabindex="-1"

💡 Hint

Screen readers need to know if the dropdown is open or closed.

The aria-expanded attribute tells assistive technologies whether the dropdown is currently expanded or collapsed, improving accessibility.

📝 Syntax

advanced

What error occurs with this dropdown button code?

Examine this snippet:

• Save
• Delete

But the dropdown does not open when clicked. What is the most likely cause?

A The dropdown-menu must be a <div> instead of <ul>

B Incorrect class name on button (should be btn-primary)

C The aria-expanded attribute must be true initially

D Missing Bootstrap JavaScript bundle inclusion

💡 Hint

Bootstrap dropdowns need JavaScript to toggle visibility.

Without including Bootstrap's JavaScript bundle, the dropdown toggle won't work because the click event is not handled.

❓ selector

advanced

Which CSS selector targets only the dropdown toggle button inside a dropdown?

You want to style only the button that toggles the dropdown inside this structure:

...

Which CSS selector correctly targets only the toggle button?

A .dropdown > button.dropdown-toggle

B .dropdown .dropdown-menu button

C .dropdown-menu + button

D button.btn-info

💡 Hint

Look for a selector that targets a button with class dropdown-toggle directly inside .dropdown.

The selector '.dropdown > button.dropdown-toggle' selects any button with class dropdown-toggle that is a direct child of an element with class dropdown.

❓ layout

expert

How to make a Bootstrap dropdown button full width inside a container?

You have this dropdown button inside a container:

...

You want the button to stretch to fill the container's width responsively. Which is the best way?

A Wrap the button in a flex container with justify-content-center

B Add style="width: 100px" to the button element

C Add class w-100 to the button element

D Add class dropdown-menu-end to the dropdown-menu

💡 Hint

Bootstrap has utility classes for width control.

The w-100 class sets width to 100% making the button fill the container's width responsively.

Practice

1. What is the main purpose of a dropdown button in Bootstrap?

easy

A. To create a button that changes color on hover

B. To add animations to buttons automatically

C. To display a static list of links on the page

D. To hide multiple options under one button for a cleaner page

Solution

1. Step 1: Understand dropdown button purpose

   A dropdown button groups several options under one button to save space and keep the page tidy.

2. Step 2: Compare options

   Only To hide multiple options under one button for a cleaner page describes hiding options under one button, which matches the dropdown's purpose.

3. Final Answer:

   To hide multiple options under one button for a cleaner page -> Option D

4. Quick Check:

   Dropdown button = hides options [OK]

Hint: Dropdowns hide options under one button for neatness [OK]

Common Mistakes:

• Thinking dropdowns only change button color
• Confusing dropdowns with static lists
• Assuming dropdowns add animations automatically

2. Which of the following is the correct Bootstrap class to create a dropdown toggle button?

easy

A. dropdown-toggle btn-primary

B. btn dropdown-toggle

C. btn btn-primary dropdown-toggle

D. btn-toggle dropdown

Solution

1. Step 1: Identify required classes for dropdown toggle

   Bootstrap dropdown toggle buttons need btn, a style class like btn-primary, and dropdown-toggle to work properly.

2. Step 2: Check options for correct class order and completeness

   btn btn-primary dropdown-toggle has all three classes in correct order: btn btn-primary dropdown-toggle. Others miss or misorder classes.

3. Final Answer:

   btn btn-primary dropdown-toggle -> Option C

4. Quick Check:

   Dropdown toggle = btn + style + dropdown-toggle [OK]

Hint: Use btn + style + dropdown-toggle classes together [OK]

Common Mistakes:

• Omitting btn or dropdown-toggle class
• Wrong class order causing no toggle effect
• Using non-existent classes like btn-toggle

3. What will happen if you omit Bootstrap's JavaScript file when using a dropdown button?

medium

A. The dropdown menu will not open when clicking the button

B. The dropdown menu will open but with no styling

C. The dropdown button will change color on click but no menu appears

D. The dropdown menu will open automatically on page load

Solution

1. Step 1: Understand Bootstrap dropdown dependency

   Bootstrap dropdowns require JavaScript to handle the toggle action when clicking the button.

2. Step 2: Predict behavior without JavaScript

   Without JavaScript, clicking the button won't trigger the menu to open, so the dropdown stays closed.

3. Final Answer:

   The dropdown menu will not open when clicking the button -> Option A

4. Quick Check:

   Missing JS = no dropdown open [OK]

Hint: Bootstrap dropdown needs JS to open menu on click [OK]

Common Mistakes:

• Thinking CSS alone opens dropdown
• Assuming menu appears without JS
• Confusing color change with dropdown functionality

4. Identify the error in this dropdown button code snippet:

<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
</div>

medium

A. The dropdown-menu div should be a ul element

B. The attribute should be data-bs-toggle="dropdown" instead of data-toggle="dropdown"

C. The button is missing the type="submit" attribute

D. The dropdown-item class should be on a button element, not a

Solution

1. Step 1: Check Bootstrap 5 attribute syntax

   Bootstrap 5 uses data-bs-toggle="dropdown" instead of the older data-toggle="dropdown".

2. Step 2: Verify other parts

   Button type can be "button"; dropdown-menu can be a div; a with dropdown-item is correct.

3. Final Answer:

   The attribute should be data-bs-toggle="dropdown" instead of data-toggle="dropdown" -> Option B

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle [OK]

Hint: Use data-bs-toggle for Bootstrap 5 dropdowns [OK]

Common Mistakes:

• Using old data-toggle attribute
• Changing button type unnecessarily
• Replacing div with ul incorrectly
• Misusing dropdown-item on wrong elements

5. You want a dropdown button that shows a list of user actions and closes the menu when an item is clicked. Which Bootstrap setup ensures this behavior?

hard

A. Use button with dropdown-toggle and data-bs-toggle="dropdown", and a tags with dropdown-item inside dropdown-menu

B. Use button with dropdown-toggle but omit data-bs-toggle, and use div tags inside dropdown-menu

C. Use button with dropdown-toggle and data-toggle="dropdown", and button tags with dropdown-item inside dropdown-menu

D. Use a tag with dropdown-toggle and data-bs-toggle="dropdown", and span tags inside dropdown-menu

Solution

1. Step 1: Confirm correct attribute for Bootstrap 5

   Bootstrap 5 requires data-bs-toggle="dropdown" for toggling dropdowns, not data-toggle.

2. Step 2: Check element types for accessibility and behavior

   Using button elements with dropdown-toggle and a or button tags with dropdown-item inside dropdown-menu ensures keyboard accessibility and closes menu on click.

3. Step 3: Evaluate options

   Only C uses data-bs-toggle="dropdown" (BS5 correct) with proper button.dropdown-toggle and a.dropdown-item that auto-closes the menu.

4. Final Answer:

   Use button with dropdown-toggle and data-bs-toggle="dropdown", and a tags with dropdown-item inside dropdown-menu -> Option A

5. Quick Check:

   data-bs-toggle + dropdown-item = auto close [OK]

Hint: data-bs-toggle + dropdown-item auto closes menu [OK]

Common Mistakes:

• Using old data-toggle instead of data-bs-toggle
• Omitting data-bs-toggle
• Using a tag for toggle or span for items