Split button dropdowns in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a split button dropdown in Bootstrap?

A split button dropdown is a button group with two parts: one part triggers a main action, and the other part opens a dropdown menu with more options.

beginner

Which Bootstrap classes are essential to create a split button dropdown?

You need btn-group for grouping, btn for buttons, and dropdown-toggle with data-bs-toggle="dropdown" for the dropdown toggle button.

intermediate

How do you make the dropdown part accessible for keyboard users?

Bootstrap automatically supports keyboard navigation for dropdowns. Use semantic buttons and ensure aria-expanded updates correctly when toggling.

beginner

What role does data-bs-toggle="dropdown" play in split button dropdowns?

It tells Bootstrap’s JavaScript to toggle the dropdown menu when the button is clicked.

intermediate

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

A split button lets users quickly perform a default action with one click, or choose other options from the dropdown, improving usability.

Which class groups buttons together for a split button dropdown in Bootstrap?

A btn-group

B dropdown-menu

C btn-toggle

D dropdown-item

The btn-group class groups buttons together to create a split button dropdown.

What attribute is needed on the dropdown toggle button to open the menu?

A data-bs-toggle="dropdown"

B data-toggle="dropdown"

C aria-haspopup="true"

D role="button"

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

In a split button dropdown, what does the main button do?

A Closes the dropdown menu

B Opens the dropdown menu

C Performs the default action

D Disables the dropdown

The main button performs the default or primary action immediately.

Which element contains the dropdown options in a split button dropdown?

A <code>&lt;button&gt;</code>

B <code>&lt;ul&gt;</code> or <code>&lt;div&gt;</code> with class <code>dropdown-menu</code>

C <code>&lt;div&gt;</code> with class <code>btn-group</code>

D <code>&lt;a&gt;</code> with class <code>btn</code>

The dropdown options are inside a <ul> or <div> with the dropdown-menu class.

How does Bootstrap ensure the dropdown is accessible?

A By adding <code>tabindex="-1"</code> to all buttons

B By disabling keyboard navigation

C By hiding dropdown items visually

D By using ARIA attributes and keyboard support

Bootstrap uses ARIA roles and keyboard navigation to make dropdowns accessible.

Explain how to create a split button dropdown in Bootstrap and why it is useful.

Think about grouping buttons and how users interact with them.

Describe the accessibility features Bootstrap provides for split button dropdowns.

Consider how users with keyboards or screen readers use dropdowns.

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