Dropdown directions (up, left, right) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Dropdown direction: Which class makes the dropdown open upwards?

Given a Bootstrap dropdown button, which class makes the dropdown menu open above the button instead of below?

Bootsrap

<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>

A Add class <code>drop-top</code> to the parent <code>div</code>

B Add class <code>dropdown-menu-up</code> to the <code>ul</code> element

C Add class <code>dropdown-top</code> to the button element

D Add class <code>dropup</code> to the parent <code>div</code> wrapping the button and menu

💡 Hint

Bootstrap uses specific parent classes to control dropdown direction.

In Bootstrap, to make a dropdown open upwards, you add the dropup class to the parent container of the dropdown button and menu. Other classes like dropdown-menu-up or dropdown-top do not exist in Bootstrap.

📝 Syntax

intermediate

Correct class for left-aligned dropdown in Bootstrap

Which class correctly aligns the dropdown menu to the left side of the button in Bootstrap 5?

Bootsrap

<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</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>

A dropdown-menu-start

B dropdown-menu-left

C dropdown-menu-align-left

D dropdown-menu-leftside

💡 Hint

Bootstrap 5 uses directional suffixes like '-start' and '-end' for alignment.

Bootstrap 5 uses dropdown-menu-start to align the dropdown menu to the left side of the button. Classes like dropdown-menu-left are not valid in Bootstrap 5.

🧠 Conceptual

advanced

What happens if you add both dropup and dropdown-menu-end classes?

If you add dropup to the dropdown container and dropdown-menu-end to the menu, how will the dropdown behave?

Bootsrap

<div class="dropup"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Options</button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">First</a></li> <li><a class="dropdown-item" href="#">Second</a></li> </ul> </div>

A The menu opens upwards and aligns to the right side of the button

B The menu opens downwards and aligns to the left side of the button

C The menu opens upwards but aligns to the left side ignoring dropdown-menu-end

D The menu does not open due to conflicting classes

💡 Hint

dropup controls vertical direction; dropdown-menu-end controls horizontal alignment.

The dropup class makes the menu open above the button. The dropdown-menu-end class aligns the menu to the right side horizontally. Both work together without conflict.

❓ accessibility

advanced

Which attribute improves accessibility for dropdown toggle buttons?

To make a dropdown toggle button accessible, which ARIA attribute should you include?

Bootsrap

<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Toggle</button>

A aria-label="dropdown-toggle"

B aria-expanded="false"

C aria-pressed="true"

D aria-hidden="true"

💡 Hint

This attribute tells screen readers if the dropdown is open or closed.

The aria-expanded attribute indicates whether the dropdown menu is currently expanded (open) or collapsed (closed). It should be updated dynamically by Bootstrap's JavaScript.

❓ selector

expert

CSS selector to style only dropdown menus opening to the right

Which CSS selector targets only dropdown menus that open to the right side using Bootstrap classes?

A .dropdown-menu.dropdown-menu-right

B .dropdown-menu.dropdown-menu-end

C .dropend .dropdown-menu

D .dropdown-menu.drop-right

💡 Hint

Bootstrap uses specific parent classes to control dropdown direction, not just menu classes.

Bootstrap uses the dropend class on the dropdown container to make the menu open to the right. The menu itself has class dropdown-menu but no dropdown-menu-end for right direction. dropdown-menu-end aligns the menu inside the container but does not control opening direction.