Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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