Dropdown directions (up, left, right) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the dropdown open upwards.

Bootsrap

<div class="dropdown drop[1]">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

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

Astart

Bend

Cup

Ddown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'down' which is the default and does not change direction.

Confusing 'start' or 'end' which control horizontal alignment.

Adding the class 'dropup' makes the dropdown open upwards instead of downwards.

2fill in blank

medium

Complete the code to make the dropdown menu align to the left side of the button.

Bootsrap

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

Astart

Bend

Cup

Ddown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown-menu-end' which aligns the menu to the right.

Using 'down' or 'up' which control vertical direction, not horizontal alignment.

The class 'dropdown-menu-start' aligns the dropdown menu to the left side of the button.

3fill in blank

hard

Fix the error in the code to make the dropdown open to the right side.

Bootsrap

<div class="dropdown drop[1]">
  <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option A</a></li>
    <li><a class="dropdown-item" href="#">Option B</a></li>
  </ul>
</div>

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

Aleft

Bright

Cstart

Dend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropright' which is not supported in Bootstrap 5.

Using 'dropleft' or 'dropstart' which open the dropdown to the left.

The class 'dropright' is deprecated in Bootstrap 5. Use 'dropend' to open the dropdown to the right side.

4fill in blank

hard

Fill both blanks to create a dropdown that opens upwards and aligns its menu to the right.

Bootsrap

<div class="dropdown [1]">
  <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-[2]">
    <li><a class="dropdown-item" href="#">First</a></li>
    <li><a class="dropdown-item" href="#">Second</a></li>
  </ul>
</div>

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

Adropup

Bstart

Cend

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'start' and 'end' for horizontal alignment.

Using 'dropdown' class in place of direction classes.

Use 'dropup' to open the dropdown upwards and 'dropdown-menu-end' to align the menu to the right side.

5fill in blank

hard

Fill all three blanks to create a dropdown that opens to the left, with the menu aligned to the left, and uses a button with the 'btn-success' class.

Bootsrap

<div class="dropdown [1]">
  <button class="btn [2] dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-[3]">
    <li><a class="dropdown-item" href="#">Alpha</a></li>
    <li><a class="dropdown-item" href="#">Beta</a></li>
  </ul>
</div>

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

Adropstart

Bbtn-success

Cstart

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropend' instead of 'dropstart' for left direction.

Using 'btn-primary' instead of 'btn-success' for the button color.

Mixing up 'start' and 'end' for menu alignment.

Use 'dropstart' to open the dropdown to the left, 'btn-success' for the green button style, and 'dropdown-menu-start' to align the menu to the left.