Dropdown menu alignment in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align the dropdown menu to the right.

Bootsrap

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

Adropdown-menu-center

Bdropdown-menu-start

Cdropdown-menu-end

Ddropdown-menu-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown-menu-start' which aligns left instead of right.

Using non-existent classes like 'dropdown-menu-center'.

The class 'dropdown-menu-end' aligns the dropdown menu to the right side of its parent.

2fill in blank

medium

Complete the code to align the dropdown menu to the left.

Bootsrap

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

Bdropdown-menu-start

Cdropdown-menu-right

Ddropdown-menu-left

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'dropdown-menu-left' which is not a valid Bootstrap class.

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

3fill in blank

hard

Fix the error in the dropdown menu alignment class to align it right.

Bootsrap

<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Fix Me
  </button>
  <ul class="dropdown-menu [1]">
    <li><a class="dropdown-item" href="#">Fix this</a></li>
  </ul>
</div>

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

Adropdown-menu-end

Bdropdown-menu-left

Cdropdown-menu-right

Ddropdown-menu-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown-menu-right' which is not a Bootstrap class.

Using 'dropdown-menu-left' which aligns left or is invalid.

The correct Bootstrap class to align the dropdown menu to the right is 'dropdown-menu-end'.

4fill in blank

hard

Fill both blanks to create a dropdown aligned to the right with a button labeled 'Menu'.

Bootsrap

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

Aprimary

Bsecondary

CMenu

DDropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-secondary' with a label 'Dropdown' which is less clear.

Mixing button color and label incorrectly.

The button uses 'btn-primary' for a blue button and the label 'Menu' is appropriate for the dropdown button.

5fill in blank

hard

Fill all three blanks to create a dropdown with a green button labeled 'Options' and the menu aligned left.

Bootsrap

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

Asuccess

BOptions

Cdropdown-menu-start

Ddropdown-menu-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown-menu-end' which aligns right instead of left.

Using wrong button color or label.

The button uses 'btn-success' for green, label 'Options', and 'dropdown-menu-start' aligns the menu to the left.

Practice

1. Which Bootstrap class aligns a dropdown menu to the right side of its toggle button?

easy

A. dropdown-menu-start

B. dropdown-menu-end

C. dropdown-menu-center

D. dropdown-menu-right

Solution

1. Step 1: Understand dropdown alignment classes

   Bootstrap uses dropdown-menu-start to align left, dropdown-menu-end to align right, and dropdown-menu-center to center the dropdown menu.

2. Step 2: Identify the class for right alignment

   The class dropdown-menu-end aligns the dropdown menu to the right side of the toggle button.

3. Final Answer:

   dropdown-menu-end -> Option B

4. Quick Check:

   Right alignment = dropdown-menu-end [OK]

Hint: Right side alignment uses dropdown-menu-end class [OK]

Common Mistakes:

• Using dropdown-menu-right which does not exist
• Confusing dropdown-menu-start with right alignment
• Forgetting to add the class to the dropdown menu element

2. Which is the correct syntax to align a Bootstrap dropdown menu to the left side?

easy

A. <ul class='dropdown-menu dropdown-menu-start'>

B. <ul class='dropdown-menu-left'>

C. <ul class='dropdown-menu dropdown-menu-end'>

D. <ul class='dropdown-menu-start'>

Solution

1. Step 1: Recognize required base class

   Bootstrap dropdown menus require the base class dropdown-menu for styling and behavior.

2. Step 2: Add alignment class correctly

   The alignment class dropdown-menu-start must be combined with dropdown-menu in the class attribute, like dropdown-menu dropdown-menu-start.

3. Final Answer:

   <ul class='dropdown-menu dropdown-menu-start'> -> Option A

4. Quick Check:

   Base class + alignment class = dropdown-menu dropdown-menu-start [OK]

Hint: Always include 'dropdown-menu' before alignment class [OK]

Common Mistakes:

• Omitting the base 'dropdown-menu' class
• Using non-existent class 'dropdown-menu-left'
• Placing alignment class without base class

3. What will be the visual alignment of the dropdown menu in this code?

<div class='dropdown'>
  <button class='btn btn-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>Menu</button>
  <ul class='dropdown-menu dropdown-menu-center'>
    <li><a class='dropdown-item' href='#'>Item 1</a></li>
    <li><a class='dropdown-item' href='#'>Item 2</a></li>
  </ul>
</div>

medium

A. Dropdown menu aligned to the left

B. Dropdown menu aligned to the right

C. Dropdown menu centered below the toggle button

D. Dropdown menu will not display

Solution

1. Step 1: Identify the alignment class used

   The class dropdown-menu-center is used on the dropdown menu, which centers the menu horizontally below the toggle button.

2. Step 2: Understand Bootstrap dropdown alignment behavior

   Bootstrap aligns dropdown menus left by default, right with dropdown-menu-end, and center with dropdown-menu-center. So this menu will appear centered.

3. Final Answer:

   Dropdown menu centered below the toggle button -> Option C

4. Quick Check:

   dropdown-menu-center means center alignment [OK]

Hint: dropdown-menu-center centers menu under toggle button [OK]

Common Mistakes:

• Assuming dropdown-menu-center aligns right
• Forgetting default is left alignment
• Thinking menu won't show without extra JS

4. You want to align a dropdown menu to the right, but it still appears left-aligned. What is the likely error in this code?

<ul class='dropdown-menu-end'>
  <li><a class='dropdown-item' href='#'>Option</a></li>
</ul>

medium

A. Missing 'dropdown-menu' base class in the <ul> element

B. Using 'dropdown-menu-end' instead of 'dropdown-menu-right'

C. The dropdown toggle button lacks 'data-bs-toggle' attribute

D. The dropdown menu must be a <div>, not a <ul>

Solution

1. Step 1: Check required classes for dropdown menu

   Bootstrap requires the base class dropdown-menu on the menu element for proper styling and alignment.

2. Step 2: Identify missing class causing alignment issue

   The code only has dropdown-menu-end without dropdown-menu, so the alignment class alone won't work.

3. Final Answer:

   Missing 'dropdown-menu' base class in the <ul> element -> Option A

4. Quick Check:

   Base class missing = no alignment effect [OK]

Hint: Always include 'dropdown-menu' with alignment classes [OK]

Common Mistakes:

• Using non-existent class 'dropdown-menu-right'
• Ignoring missing base class 'dropdown-menu'
• Assuming element type affects alignment

5. You want a dropdown menu that aligns to the right on large screens but centers on small screens. Which Bootstrap classes and approach achieve this?

hard

A. dropdown-menu dropdown-menu-end dropdown-menu-center on the same element

B. Use dropdown-menu dropdown-menu-center and add text-end on large screens

C. Use JavaScript to toggle between dropdown-menu-end and dropdown-menu-center classes on window resize

D. Use dropdown-menu dropdown-menu-end and add custom media query CSS for center alignment on small screens

Solution

1. Step 1: Understand Bootstrap alignment classes limitations

   Bootstrap does not support multiple alignment classes on the same element for responsive changes.

2. Step 2: Use base class with custom CSS media queries

   Apply dropdown-menu dropdown-menu-end for right alignment by default, then use CSS media queries to override alignment to center on small screens.

3. Final Answer:

   Use dropdown-menu dropdown-menu-end and add custom media query CSS for center alignment on small screens -> Option D

4. Quick Check:

   Responsive alignment needs CSS media queries [OK]

Hint: Combine Bootstrap with media queries for responsive alignment [OK]

Common Mistakes:

• Adding multiple alignment classes on one element
• Relying only on Bootstrap classes for responsive alignment
• Using JavaScript when CSS media queries suffice