0
0
Bootsrapmarkup~10 mins

Dropdown menu alignment in Bootsrap - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
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'.
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.
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.
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.
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.