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.

Practice

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

easy

A. To create a button that changes color on hover

B. To create two separate buttons side by side without any dropdown

C. To display only a dropdown menu without any main button

D. To combine a main action button with a dropdown menu for alternative actions

Solution

1. Step 1: Understand the split button dropdown concept

   A split button dropdown combines a main button for a default action and a dropdown toggle for other options.

2. Step 2: Identify the purpose in Bootstrap

   Bootstrap uses split buttons to save space and provide quick access to a main action plus alternatives.

3. Final Answer:

   To combine a main action button with a dropdown menu for alternative actions -> Option D

4. Quick Check:

   Split button = main + dropdown [OK]

Hint: Split button = main action + dropdown arrow [OK]

Common Mistakes:

• Thinking split button is two separate buttons
• Confusing split button with a single dropdown button
• Assuming split button changes color only

2. Which Bootstrap class is essential to create the dropdown toggle part of a split button dropdown?

easy

A. btn-toggle

B. dropdown-toggle

C. btn-split

D. dropdown-button

Solution

1. Step 1: Identify the class for dropdown toggle

   Bootstrap uses the class dropdown-toggle to mark the button that toggles the dropdown menu.

2. Step 2: Confirm the correct class for split button toggle

   In split buttons, the toggle button must have dropdown-toggle to work properly.

3. Final Answer:

   dropdown-toggle -> Option B

4. Quick Check:

   Dropdown toggle class = dropdown-toggle [OK]

Hint: Dropdown toggle always uses class dropdown-toggle [OK]

Common Mistakes:

• Using non-existent classes like btn-toggle
• Confusing btn-split with dropdown-toggle
• Using dropdown-button which is invalid

3. What will be the visual result of this Bootstrap split button dropdown code?

<div class="btn-group">
  <button type="button" class="btn btn-primary">Save</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="#">Save as Draft</a></li>
    <li><a class="dropdown-item" href="#">Save and Publish</a></li>
  </ul>
</div>

medium

A. A single blue button labeled 'Save' that opens a dropdown menu when clicked

B. Two separate blue buttons labeled 'Save' and 'Toggle Dropdown' side by side with no dropdown

C. A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu

D. A blue button labeled 'Toggle Dropdown' with no main action button

Solution

1. Step 1: Analyze the button group structure

   The code creates a button group with a main button labeled 'Save' and a split dropdown toggle button next to it.

2. Step 2: Understand the visual effect

   The main button is blue (btn-primary) and the toggle button has a small arrow (dropdown-toggle-split) that opens the dropdown menu with two options.

3. Final Answer:

   A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu -> Option C

4. Quick Check:

   Split button = main + arrow dropdown [OK]

Hint: Split button shows main label + small arrow for dropdown [OK]

Common Mistakes:

• Thinking toggle button shows text 'Toggle Dropdown'
• Assuming buttons are separate with no dropdown
• Confusing single button dropdown with split button

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

<div class="btn-group">
  <button class="btn btn-secondary">Options</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
  </ul>
</div>

medium

A. Using data-toggle instead of data-bs-toggle for Bootstrap 5

B. Missing the class dropdown-toggle-split on the toggle button

C. The dropdown-menu should be a div, not ul

D. The main button should have dropdown-toggle class

Solution

1. Step 1: Check Bootstrap 5 data attribute usage

   Bootstrap 5 uses data-bs-toggle instead of data-toggle to activate dropdowns.

2. Step 2: Identify the incorrect attribute

   The code uses data-toggle="dropdown", which is from Bootstrap 4 and will not work in Bootstrap 5.

3. Final Answer:

   Using data-toggle instead of data-bs-toggle for Bootstrap 5 -> Option A

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle [OK]

Hint: Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Common Mistakes:

• Forgetting to add dropdown-toggle-split class
• Using old data-toggle attribute
• Changing dropdown-menu from ul to div incorrectly

5. You want a split button dropdown where the main button triggers a form submission and the dropdown offers alternative submission options. Which is the best way to implement this in Bootstrap?

hard

A. Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown'

B. Use two separate buttons outside a form, one for submit and one for dropdown

C. Use a single dropdown button with all submission options inside the dropdown

D. Use a main button with type='button' and dropdown toggle without form

Solution

1. Step 1: Understand form submission with split button

   The main button should submit the form, so it needs type='submit' inside the form element.

2. Step 2: Add dropdown toggle for alternative options

   The dropdown toggle uses data-bs-toggle='dropdown' to show alternative submission choices without submitting immediately.

3. Final Answer:

   Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown' -> Option A

4. Quick Check:

   Main button submits form + dropdown toggle shows options [OK]

Hint: Main button type='submit' inside form + dropdown toggle [OK]

Common Mistakes:

• Using type='button' on main submit button
• Placing buttons outside the form
• Using single dropdown button without main submit