0
0
Bootsrapmarkup~30 mins

Dropdown directions (up, left, right) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Dropdown Directions: Up, Left, Right
📋 What You'll Learn
💡 Why This Matters
🌍 Real World
Dropdown menus are common in websites and apps for navigation and actions. Knowing how to control their direction helps create better user interfaces that fit different layouts and screen spaces.
💼 Career
Web developers often need to customize dropdown menus for usability and design. Understanding Bootstrap's dropdown direction classes is a practical skill for front-end development jobs.
Progress0 / 4 steps
1
Set up the basic HTML structure with Bootstrap links
Create a basic HTML5 document with lang="en". Inside the <head>, add the Bootstrap 5 CSS CDN link. In the <body>, add a <div> with class container mt-5 to hold the dropdown buttons. Do not add the dropdown buttons yet.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link inside the <head> and the Bootstrap JS bundle script before the closing </body> tag.

2
Add the 'Up' dropdown button that opens upwards
Inside the div with class container mt-5, add a Bootstrap dropdown button with label Up. Use the class dropup on the dropdown container to make the menu open upwards. The dropdown menu should have two items: Action 1 and Action 2. Use proper aria attributes for accessibility.
Bootsrap
Need a hint?

Use the dropup class on the container div to make the dropdown open upwards. Make sure the button has data-bs-toggle="dropdown" and proper aria attributes.

3
Add the 'Left' dropdown button that opens to the left
Below the 'Up' dropdown, add a Bootstrap dropdown button labeled Left. Use the class dropstart on the dropdown container to make the menu open to the left. The dropdown menu should have two items: Action 1 and Action 2. Use proper aria attributes for accessibility.
Bootsrap
Need a hint?

Use the dropstart class on the container div to make the dropdown open to the left. Add some margin top mt-3 to separate from the previous button.

4
Add the 'Right' dropdown button that opens to the right
Below the 'Left' dropdown, add a Bootstrap dropdown button labeled Right. Use the class dropend on the dropdown container to make the menu open to the right. The dropdown menu should have two items: Action 1 and Action 2. Use proper aria attributes for accessibility.
Bootsrap
Need a hint?

Use the dropend class on the container div to make the dropdown open to the right. Add margin top mt-3 for spacing. Use a different button color like btn-success for variety.