Dropdown button basics in Bootsrap - Mini Project: Build & Apply

Dropdown Button Basics with Bootstrap

📖 Scenario: You are creating a simple webpage with a dropdown button. This button will let users pick an option from a list. Dropdown buttons are common in websites for menus or choices.

🎯 Goal: Build a basic Bootstrap dropdown button with three options: Option 1, Option 2, and Option 3. The dropdown should open when clicked.

📋 What You'll Learn

Use Bootstrap 5 classes for the dropdown button

Create a button with the text 'Dropdown button'

Add three dropdown items labeled exactly 'Option 1', 'Option 2', and 'Option 3'

Ensure the dropdown toggles on button click

Use semantic HTML and include necessary Bootstrap attributes

💡 Why This Matters

🌍 Real World

Dropdown buttons are used in websites for navigation menus, settings, and user choices. Learning to build them helps create interactive and user-friendly interfaces.

💼 Career

Web developers often use Bootstrap to quickly build responsive and accessible UI components like dropdowns. This skill is essential for front-end development jobs.

1

Create the basic HTML structure with Bootstrap CSS link

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <head>, link the Bootstrap 5 CSS from the official CDN using the exact href https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Inside the <body>, add a <div> with class container mt-5 to hold the dropdown button later.

Bootsrap

Hint

Remember to include the Bootstrap CSS link exactly as given to get the styles.

2

Add the dropdown button HTML structure

Inside the <div class="container mt-5">, add a <div> with class dropdown. Inside it, create a <button> with classes btn btn-primary dropdown-toggle, type="button", id="dropdownMenuButton", data-bs-toggle="dropdown", and aria-expanded="false". The button text should be exactly Dropdown button.

Bootsrap

    
    
    
    Dropdown Button Basics


    
        
            
        
    

Hint

Use the Bootstrap classes exactly and add the required attributes for the dropdown toggle.

3

Add the dropdown menu with three options

Below the <button> inside the <div class="dropdown">, add a <ul> with class dropdown-menu and aria-labelledby="dropdownMenuButton". Inside the <ul>, add three <li> elements. Each <li> should contain an <a> with class dropdown-item and href #. The link texts must be exactly Option 1, Option 2, and Option 3 in that order.

Bootsrap

    
    
    
    Dropdown Button Basics


    
        
            
                Dropdown button
            
            
        
    

Hint

Make sure the aria-labelledby matches the button's id for accessibility.

4

Add Bootstrap JavaScript bundle for dropdown functionality

Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from the CDN with the exact src https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This script enables the dropdown toggle to work when the button is clicked.

Bootsrap

    
    
    
    Dropdown Button Basics


    
        
            
                Dropdown button
            
            
                Option 1
                Option 2
                Option 3
            
        
    
    

Hint

This script is needed to make the dropdown open and close when clicked.

Practice

1. What is the main purpose of a dropdown button in Bootstrap?

easy

A. To create a button that changes color on hover

B. To add animations to buttons automatically

C. To display a static list of links on the page

D. To hide multiple options under one button for a cleaner page

Solution

1. Step 1: Understand dropdown button purpose

   A dropdown button groups several options under one button to save space and keep the page tidy.

2. Step 2: Compare options

   Only To hide multiple options under one button for a cleaner page describes hiding options under one button, which matches the dropdown's purpose.

3. Final Answer:

   To hide multiple options under one button for a cleaner page -> Option D

4. Quick Check:

   Dropdown button = hides options [OK]

Hint: Dropdowns hide options under one button for neatness [OK]

Common Mistakes:

• Thinking dropdowns only change button color
• Confusing dropdowns with static lists
• Assuming dropdowns add animations automatically

2. Which of the following is the correct Bootstrap class to create a dropdown toggle button?

easy

A. dropdown-toggle btn-primary

B. btn dropdown-toggle

C. btn btn-primary dropdown-toggle

D. btn-toggle dropdown

Solution

1. Step 1: Identify required classes for dropdown toggle

   Bootstrap dropdown toggle buttons need btn, a style class like btn-primary, and dropdown-toggle to work properly.

2. Step 2: Check options for correct class order and completeness

   btn btn-primary dropdown-toggle has all three classes in correct order: btn btn-primary dropdown-toggle. Others miss or misorder classes.

3. Final Answer:

   btn btn-primary dropdown-toggle -> Option C

4. Quick Check:

   Dropdown toggle = btn + style + dropdown-toggle [OK]

Hint: Use btn + style + dropdown-toggle classes together [OK]

Common Mistakes:

• Omitting btn or dropdown-toggle class
• Wrong class order causing no toggle effect
• Using non-existent classes like btn-toggle

3. What will happen if you omit Bootstrap's JavaScript file when using a dropdown button?

medium

A. The dropdown menu will not open when clicking the button

B. The dropdown menu will open but with no styling

C. The dropdown button will change color on click but no menu appears

D. The dropdown menu will open automatically on page load

Solution

1. Step 1: Understand Bootstrap dropdown dependency

   Bootstrap dropdowns require JavaScript to handle the toggle action when clicking the button.

2. Step 2: Predict behavior without JavaScript

   Without JavaScript, clicking the button won't trigger the menu to open, so the dropdown stays closed.

3. Final Answer:

   The dropdown menu will not open when clicking the button -> Option A

4. Quick Check:

   Missing JS = no dropdown open [OK]

Hint: Bootstrap dropdown needs JS to open menu on click [OK]

Common Mistakes:

• Thinking CSS alone opens dropdown
• Assuming menu appears without JS
• Confusing color change with dropdown functionality

4. Identify the error in this dropdown button code snippet:

<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
</div>

medium

A. The dropdown-menu div should be a ul element

B. The attribute should be data-bs-toggle="dropdown" instead of data-toggle="dropdown"

C. The button is missing the type="submit" attribute

D. The dropdown-item class should be on a button element, not a

Solution

1. Step 1: Check Bootstrap 5 attribute syntax

   Bootstrap 5 uses data-bs-toggle="dropdown" instead of the older data-toggle="dropdown".

2. Step 2: Verify other parts

   Button type can be "button"; dropdown-menu can be a div; a with dropdown-item is correct.

3. Final Answer:

   The attribute should be data-bs-toggle="dropdown" instead of data-toggle="dropdown" -> Option B

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle [OK]

Hint: Use data-bs-toggle for Bootstrap 5 dropdowns [OK]

Common Mistakes:

• Using old data-toggle attribute
• Changing button type unnecessarily
• Replacing div with ul incorrectly
• Misusing dropdown-item on wrong elements

5. You want a dropdown button that shows a list of user actions and closes the menu when an item is clicked. Which Bootstrap setup ensures this behavior?

hard

A. Use button with dropdown-toggle and data-bs-toggle="dropdown", and a tags with dropdown-item inside dropdown-menu

B. Use button with dropdown-toggle but omit data-bs-toggle, and use div tags inside dropdown-menu

C. Use button with dropdown-toggle and data-toggle="dropdown", and button tags with dropdown-item inside dropdown-menu

D. Use a tag with dropdown-toggle and data-bs-toggle="dropdown", and span tags inside dropdown-menu

Solution

1. Step 1: Confirm correct attribute for Bootstrap 5

   Bootstrap 5 requires data-bs-toggle="dropdown" for toggling dropdowns, not data-toggle.

2. Step 2: Check element types for accessibility and behavior

   Using button elements with dropdown-toggle and a or button tags with dropdown-item inside dropdown-menu ensures keyboard accessibility and closes menu on click.

3. Step 3: Evaluate options

   Only C uses data-bs-toggle="dropdown" (BS5 correct) with proper button.dropdown-toggle and a.dropdown-item that auto-closes the menu.

4. Final Answer:

   Use button with dropdown-toggle and data-bs-toggle="dropdown", and a tags with dropdown-item inside dropdown-menu -> Option A

5. Quick Check:

   data-bs-toggle + dropdown-item = auto close [OK]

Hint: data-bs-toggle + dropdown-item auto closes menu [OK]

Common Mistakes:

• Using old data-toggle instead of data-bs-toggle
• Omitting data-bs-toggle
• Using a tag for toggle or span for items