Dropdown menu alignment in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap align dropdown menus by default?

In Bootstrap, when you create a dropdown menu, where is the menu aligned relative to the toggle button by default?

A The dropdown menu is aligned to the right edge of the toggle button.

B The dropdown menu appears above the toggle button.

C The dropdown menu is centered below the toggle button.

D The dropdown menu is aligned to the left edge of the toggle button.

💡 Hint

Think about the default position of dropdown menus in most websites using Bootstrap.

By default, Bootstrap aligns dropdown menus so their left edge matches the left edge of the toggle button. This means the menu opens downward and left-aligned.

📝 Syntax

intermediate

Which class aligns a Bootstrap dropdown menu to the right?

You want your dropdown menu to open aligned to the right edge of the toggle button. Which Bootstrap class should you add to the dropdown menu element?

A dropdown-menu-right-align

B dropdown-menu-end

C dropdown-menu-align-right

D dropdown-menu-right

💡 Hint

Bootstrap 5 uses a new naming convention for alignment classes.

In Bootstrap 5, the class dropdown-menu-end aligns the dropdown menu to the right edge of its parent toggle button.

❓ rendering

advanced

What is the visual result of this Bootstrap dropdown code?

Consider this HTML snippet using Bootstrap 5:

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

Where will the dropdown menu appear relative to the button when clicked?

Bootsrap

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

A The menu opens below the button, aligned to the right edge.

B The menu opens above the button, centered.

C The menu opens below the button, aligned to the left edge.

D The menu opens above the button, aligned to the right edge.

💡 Hint

Look at the class 'dropdown-menu-end' on the <ul> element.

The class dropdown-menu-end makes the dropdown menu open below the button but aligned to the right edge.

❓ selector

advanced

Which CSS selector targets only right-aligned Bootstrap dropdown menus?

You want to write custom CSS that styles only Bootstrap dropdown menus aligned to the right. Which selector correctly targets these menus?

A .dropdown-menu.dropdown-menu-end

B .dropdown-menu-right

C .dropdown > .dropdown-menu-end

D .dropdown-menu-end > .dropdown-menu

💡 Hint

Bootstrap adds the class 'dropdown-menu-end' to right-aligned menus.

The selector .dropdown-menu.dropdown-menu-end targets elements with both classes, which are the right-aligned dropdown menus.

❓ accessibility

expert

What ARIA attribute ensures screen readers announce dropdown menu state correctly?

In Bootstrap dropdowns, which ARIA attribute on the toggle button updates to reflect whether the dropdown menu is open or closed?

A aria-haspopup

B aria-controls

C aria-expanded

D aria-pressed

💡 Hint

This attribute is a boolean that changes from false to true when the menu opens.

The aria-expanded attribute on the toggle button changes dynamically to indicate if the dropdown menu is open (true) or closed (false), helping screen readers understand the state.