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.