Dropdown menu alignment in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dropdown menu in Bootstrap?

A dropdown menu is a toggleable menu that shows a list of links or actions when clicked. It helps organize navigation or options in a small space.

beginner

How do you align a dropdown menu to the right in Bootstrap?

Add the class dropdown-menu-end to the dropdown menu element. This moves the menu to align its right edge with the toggle button.

beginner

What class aligns a dropdown menu to the left in Bootstrap?

By default, dropdown menus align to the left. You can use dropdown-menu-start to explicitly align the menu to the left side.

intermediate

How can you align a dropdown menu to the center in Bootstrap?

Bootstrap does not have a built-in class for center alignment of dropdown menus. You can use custom CSS with <code>left: 50%</code> and <code>transform: translateX(-50%)</code> on the dropdown menu to center it.

intermediate

Why is dropdown menu alignment important for accessibility?

Proper alignment ensures the menu appears where users expect it, making navigation easier. It also helps keyboard users and screen readers by keeping a logical flow.

Which Bootstrap class aligns a dropdown menu to the right?

A dropdown-menu-left

B dropdown-menu-right

C dropdown-menu-center

D dropdown-menu-end

The correct class is dropdown-menu-end. Bootstrap uses this class to align dropdown menus to the right.

What is the default alignment of a Bootstrap dropdown menu?

A Center aligned

B Left aligned

C Right aligned

D Justified

By default, dropdown menus align to the left side of the toggle button.

How can you center a dropdown menu in Bootstrap?

A Use custom CSS with left 50% and transform translateX(-50%)

B Use dropdown-menu-end and dropdown-menu-start together

C Bootstrap does not support dropdown menus

D Use class dropdown-menu-center

Bootstrap does not have a built-in center alignment class, so custom CSS is needed to center the dropdown menu.

Which HTML element typically contains the dropdown menu items in Bootstrap?

A <nav>

B <ul>

C <div class='dropdown-menu'>

D <section>

Dropdown menu items are placed inside a <div> with the class dropdown-menu.

Why should dropdown menus be aligned properly?

A To improve navigation and accessibility

B To confuse users

C To make the page load faster

D To increase font size

Proper alignment helps users find menu items easily and supports keyboard and screen reader navigation.

Explain how to align a dropdown menu to the right using Bootstrap classes.

Think about the class that changes the menu's horizontal position.

Describe why dropdown menu alignment matters for user experience and accessibility.

Consider how users interact with menus visually and with assistive tools.