Split button dropdowns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

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

Look at the following HTML code using Bootstrap 5. What will you see rendered in the browser?

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </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>
  </ul>
</div>

A A blue button labeled 'Action' with a disabled dropdown arrow next to it.

B A single blue button labeled 'Action' that opens a dropdown with 'Option 1' and 'Option 2' when clicked.

C A blue button labeled 'Action' next to a smaller blue button with a downward arrow that opens a dropdown with 'Option 1' and 'Option 2'.

D Two separate blue buttons labeled 'Action' and 'Toggle Dropdown' with no dropdown menu.

💡 Hint

Remember that split button dropdowns have a main action button and a separate toggle button for the dropdown.

The split button dropdown consists of a main button labeled 'Action' and a smaller toggle button with a downward arrow. Clicking the arrow opens the dropdown menu with the listed options.

❓ accessibility

intermediate

Which attribute improves accessibility for the split button dropdown toggle?

In a Bootstrap split button dropdown, which attribute on the toggle button helps screen readers understand its purpose?

Bootsrap

<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  <span class="visually-hidden">Toggle Dropdown</span>
</button>

A aria-expanded="false"

B aria-hidden="true"

C aria-label="Toggle Dropdown"

D aria-pressed="true"

💡 Hint

This attribute tells if the dropdown is open or closed.

The aria-expanded attribute indicates whether the dropdown menu is currently expanded (open) or collapsed (closed), which helps screen readers convey the toggle state.

📝 Syntax

advanced

What error occurs if you omit the dropdown menu container in a split button dropdown?

Consider this Bootstrap split button dropdown code missing the dropdown menu

element. What happens when you click the toggle button?

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
</div>

A A JavaScript error is thrown: 'Cannot read property of undefined'.

B The dropdown toggle button does nothing; no menu appears.

C The page crashes and reloads automatically.

D The toggle button opens an empty dropdown menu.

💡 Hint

Bootstrap requires a dropdown menu container to show the menu.

Without the dropdown menu container, clicking the toggle button triggers no visible dropdown because there is no menu to show. No error is thrown, but the toggle is ineffective.

❓ selector

advanced

Which CSS selector targets only the toggle button in a Bootstrap split button dropdown?

Given this HTML structure, which CSS selector applies styles only to the toggle button (the smaller arrow button)?

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
</div>

A .btn-group > button:last-child:not(.dropdown-toggle-split)

B .btn-group > .btn-primary

C .btn-group > button:first-child

D .btn-group > .dropdown-toggle-split

💡 Hint

Look for the unique class that identifies the toggle button.

The toggle button has the class 'dropdown-toggle-split' which uniquely identifies it. The selector '.btn-group > .dropdown-toggle-split' targets only that button.

🧠 Conceptual

expert

Why use a split button dropdown instead of a single dropdown button?

What is the main advantage of using a split button dropdown in a user interface?

A It separates the main action from additional options, allowing quick access to the default action without opening the menu.

B It disables the main button when the dropdown is open to prevent accidental clicks.

C It reduces the number of buttons on the page by combining unrelated actions.

D It automatically selects the first dropdown item as the main action without user input.

💡 Hint

Think about user speed and clarity in choosing actions.

Split button dropdowns let users quickly perform the main action by clicking the main button, while still providing access to other related options via the dropdown toggle. This improves usability and efficiency.