Dropdown button basics in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap dropdown button.

Bootsrap

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="[1]" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

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

Amodal

Btooltip

Ccollapse

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting the data-bs-toggle attribute

Using incorrect Bootstrap classes on the button

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

2fill in blank

medium

Complete the code to add the correct class to the dropdown menu for proper styling.

Bootsrap

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="[1]" aria-labelledby="dropdownMenu2">
    <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'

Adropdown-menu

Bbtn-group

Cdropdown-toggle

Ddropdown-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using "dropdown-toggle" on the menu instead of the button

Using "dropdown-item" on the menu container

Omitting the class entirely

The class "dropdown-menu" styles the list as a dropdown menu in Bootstrap.

3fill in blank

hard

Fix the error in the button element to make the dropdown accessible by keyboard.

Bootsrap

<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu3" data-bs-toggle="dropdown" aria-expanded="[1]">
  Dropdown
</button>

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

Atrue

Bfalse

Cexpanded

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Setting aria-expanded to "true" when dropdown is closed

Using invalid values like "expanded" or "open"

Omitting aria-expanded attribute

The attribute aria-expanded should be "false" initially because the dropdown is closed at first.

4fill in blank

hard

Fill both blanks to create a split dropdown button with correct classes.

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary">Main Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle [1]" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="[2]"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
    <li><a class="dropdown-item" href="#">Action 2</a></li>
  </ul>
</div>

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

Adropdown-toggle-split

Bdropdown-menu

Cvisually-hidden

Ddropdown-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using "dropdown-menu" class on the toggle button

Not using "dropdown-toggle-split" for the split button

Missing "visually-hidden" class on the span

The split toggle button uses the class "dropdown-toggle-split" and the span inside uses "visually-hidden" for accessibility.

5fill in blank

hard

Fill all three blanks to create a dropdown button with a custom label and an item that is disabled.

Bootsrap

<div class="dropdown">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu4" data-bs-toggle="dropdown" aria-expanded="false">
    [1]
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li><a class="dropdown-item" href="#">[2]</a></li>
    <li><a class="dropdown-item [3]" href="#" tabindex="-1" aria-disabled="true">Disabled Item</a></li>
  </ul>
</div>

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

ACustom Dropdown

BActive Item

Cdisabled

Ddropdown-toggle

Attempts:

3 left

💡 Hint

Common Mistakes

Using "dropdown-toggle" as a class on the disabled item

Not adding the "disabled" class to the disabled item

Forgetting to set aria-disabled="true" on the disabled item

The button label is "Custom Dropdown", the first item is "Active Item", and the disabled item uses the class "disabled" for styling and accessibility.