Split button dropdowns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a split button dropdown container.

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="[1]" 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>

Drag options to blanks, or click blank then click option'

Acollapse

Bmodal

Ctooltip

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using data-bs-toggle="modal" instead of "dropdown"

Forgetting the dropdown-toggle-split class

Not including aria-expanded attribute

The attribute data-bs-toggle="dropdown" tells Bootstrap to toggle the dropdown menu when the split button is clicked.

2fill in blank

medium

Complete the code to add a dropdown item that is disabled.

Bootsrap

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Active Item</a></li>
  <li><a class="dropdown-item [1]" href="#" tabindex="-1" aria-disabled="true">Disabled Item</a></li>
</ul>

Drag options to blanks, or click blank then click option'

Ashow

Bactive

Cdisabled

Ddropdown-toggle

Attempts:

3 left

💡 Hint

Common Mistakes

Using class "active" instead of "disabled"

Omitting tabindex="-1" for disabled items

Not setting aria-disabled="true" for accessibility

Adding the class "disabled" along with tabindex="-1" and aria-disabled="true" makes the dropdown item disabled and inaccessible by keyboard.

3fill in blank

hard

Fix the error in the split button dropdown toggle button to ensure accessibility.

Bootsrap

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" [1]>
  <span class="visually-hidden">Toggle Dropdown</span>
</button>

Drag options to blanks, or click blank then click option'

Aaria-pressed="true"

Baria-expanded="false"

Caria-label="Dropdown button"

Daria-haspopup="true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-pressed instead of aria-expanded

Omitting aria-expanded attribute

Using aria-haspopup without aria-expanded

The attribute aria-expanded="false" indicates the dropdown is initially closed, improving screen reader accessibility.

4fill in blank

hard

Fill both blanks to create a split button dropdown with a primary button and a secondary toggle button.

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-[1]">Primary Action</button>
  <button type="button" class="btn btn-[2] 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="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

Drag options to blanks, or click blank then click option'

Aprimary

Bdanger

Csecondary

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same style for both buttons

Using 'danger' or 'success' for the toggle button

Forgetting the dropdown-toggle-split class

The main button uses the 'primary' style, and the toggle button uses the 'secondary' style for visual distinction.

5fill in blank

hard

Fill all three blanks to create a split button dropdown with uppercase label, value binding, and a condition to show only enabled items.

Bootsrap

const dropdownItems = items.filter(item => item.[3]).map(item => ({
  label: item.[1].toUpperCase(),
  value: item.[2]
}));

Drag options to blanks, or click blank then click option'

Aname

Bid

Cenabled

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'title' instead of 'name' for label

Filtering by 'id' instead of 'enabled'

Using 'name' as value instead of 'id'

We filter items by 'enabled' property, convert 'name' to uppercase for label, and use 'id' as the value.

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