Split button dropdowns in Bootsrap - Mini Project: Build & Apply

Create a Split Button Dropdown with Bootstrap

📖 Scenario: You are building a simple web page that includes a split button dropdown. This type of button has a main action on the left and a dropdown menu on the right. It is commonly used for actions with extra options.

🎯 Goal: Build a split button dropdown using Bootstrap 5. The button should have a main button labeled Action and a dropdown toggle with three menu items: Option 1, Option 2, and Option 3.

📋 What You'll Learn

Use Bootstrap 5 classes for styling and dropdown functionality

Create a split button with a main button and a dropdown toggle button

Include three dropdown menu items with the exact text: Option 1, Option 2, Option 3

Ensure the dropdown is accessible with proper aria attributes

Use semantic HTML and include the necessary Bootstrap data attributes

💡 Why This Matters

🌍 Real World

Split button dropdowns are common in web apps and websites where a main action has related options. For example, a 'Save' button with different save options.

💼 Career

Knowing how to build accessible, interactive UI components with Bootstrap is valuable for front-end web development roles.

1

Set up the basic HTML structure with Bootstrap CSS link

Create a basic HTML5 document with lang="en" and include the Bootstrap 5 CSS link inside the <head> section. Add a <div> with class container mt-5 inside the <body> to hold the button.

Bootsrap

    
    
    Split Button Dropdown
    


    
        
    

Hint

Remember to include the Bootstrap CSS link from a CDN inside the <head> section.

2

Add the split button dropdown HTML structure

Inside the <div class="container mt-5">, add a <div> with class btn-group. Inside it, create a main button with classes btn btn-primary and text Action. Next to it, add a button with classes btn btn-primary dropdown-toggle dropdown-toggle-split, type="button", data-bs-toggle="dropdown", and aria-expanded="false". This second button will toggle the dropdown menu.

Bootsrap

    
    
    Split Button Dropdown
    


    
        
    

Hint

Use a div with class btn-group to group the buttons. The dropdown toggle button needs the dropdown-toggle-split class and data-bs-toggle="dropdown" attribute.

3

Add the dropdown menu with three options

Below the two buttons inside the btn-group, add a <ul> with class dropdown-menu. Inside it, add three <li> elements each containing an <a> tag with class dropdown-item and href set to #. The link texts must be exactly Option 1, Option 2, and Option 3.

Bootsrap

    
    
    Split Button Dropdown
    


    
        
            Action
            
                Toggle Dropdown
            
            
        
    

Hint

Use an unordered list with class dropdown-menu and list items containing links with class dropdown-item.

4

Add Bootstrap 5 JavaScript bundle for dropdown functionality

Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from the CDN https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This will enable the dropdown toggle to work.

Bootsrap

    
    
    Split Button Dropdown
    


    
        
            Action
            
                Toggle Dropdown
            
            
                Option 1
                Option 2
                Option 3
            
        
    
    

Hint

Include the Bootstrap JavaScript bundle just before the closing </body> tag to enable dropdown functionality.

Practice

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

easy

A. To create a button that changes color on hover

B. To create two separate buttons side by side without any dropdown

C. To display only a dropdown menu without any main button

D. To combine a main action button with a dropdown menu for alternative actions

Solution

1. Step 1: Understand the split button dropdown concept

   A split button dropdown combines a main button for a default action and a dropdown toggle for other options.

2. Step 2: Identify the purpose in Bootstrap

   Bootstrap uses split buttons to save space and provide quick access to a main action plus alternatives.

3. Final Answer:

   To combine a main action button with a dropdown menu for alternative actions -> Option D

4. Quick Check:

   Split button = main + dropdown [OK]

Hint: Split button = main action + dropdown arrow [OK]

Common Mistakes:

• Thinking split button is two separate buttons
• Confusing split button with a single dropdown button
• Assuming split button changes color only

2. Which Bootstrap class is essential to create the dropdown toggle part of a split button dropdown?

easy

A. btn-toggle

B. dropdown-toggle

C. btn-split

D. dropdown-button

Solution

1. Step 1: Identify the class for dropdown toggle

   Bootstrap uses the class dropdown-toggle to mark the button that toggles the dropdown menu.

2. Step 2: Confirm the correct class for split button toggle

   In split buttons, the toggle button must have dropdown-toggle to work properly.

3. Final Answer:

   dropdown-toggle -> Option B

4. Quick Check:

   Dropdown toggle class = dropdown-toggle [OK]

Hint: Dropdown toggle always uses class dropdown-toggle [OK]

Common Mistakes:

• Using non-existent classes like btn-toggle
• Confusing btn-split with dropdown-toggle
• Using dropdown-button which is invalid

3. What will be the visual result of this Bootstrap split button dropdown code?

<div class="btn-group">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save as Draft</a></li>
    <li><a class="dropdown-item" href="#">Save and Publish</a></li>
  </ul>
</div>

medium

A. A single blue button labeled 'Save' that opens a dropdown menu when clicked

B. Two separate blue buttons labeled 'Save' and 'Toggle Dropdown' side by side with no dropdown

C. A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu

D. A blue button labeled 'Toggle Dropdown' with no main action button

Solution

1. Step 1: Analyze the button group structure

   The code creates a button group with a main button labeled 'Save' and a split dropdown toggle button next to it.

2. Step 2: Understand the visual effect

   The main button is blue (btn-primary) and the toggle button has a small arrow (dropdown-toggle-split) that opens the dropdown menu with two options.

3. Final Answer:

   A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu -> Option C

4. Quick Check:

   Split button = main + arrow dropdown [OK]

Hint: Split button shows main label + small arrow for dropdown [OK]

Common Mistakes:

• Thinking toggle button shows text 'Toggle Dropdown'
• Assuming buttons are separate with no dropdown
• Confusing single button dropdown with split button

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

<div class="btn-group">
  <button class="btn btn-secondary">Options</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
  </ul>
</div>

medium

A. Using data-toggle instead of data-bs-toggle for Bootstrap 5

B. Missing the class dropdown-toggle-split on the toggle button

C. The dropdown-menu should be a div, not ul

D. The main button should have dropdown-toggle class

Solution

1. Step 1: Check Bootstrap 5 data attribute usage

   Bootstrap 5 uses data-bs-toggle instead of data-toggle to activate dropdowns.

2. Step 2: Identify the incorrect attribute

   The code uses data-toggle="dropdown", which is from Bootstrap 4 and will not work in Bootstrap 5.

3. Final Answer:

   Using data-toggle instead of data-bs-toggle for Bootstrap 5 -> Option A

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle [OK]

Hint: Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Common Mistakes:

• Forgetting to add dropdown-toggle-split class
• Using old data-toggle attribute
• Changing dropdown-menu from ul to div incorrectly

5. You want a split button dropdown where the main button triggers a form submission and the dropdown offers alternative submission options. Which is the best way to implement this in Bootstrap?

hard

A. Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown'

B. Use two separate buttons outside a form, one for submit and one for dropdown

C. Use a single dropdown button with all submission options inside the dropdown

D. Use a main button with type='button' and dropdown toggle without form

Solution

1. Step 1: Understand form submission with split button

   The main button should submit the form, so it needs type='submit' inside the form element.

2. Step 2: Add dropdown toggle for alternative options

   The dropdown toggle uses data-bs-toggle='dropdown' to show alternative submission choices without submitting immediately.

3. Final Answer:

   Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown' -> Option A

4. Quick Check:

   Main button submits form + dropdown toggle shows options [OK]

Hint: Main button type='submit' inside form + dropdown toggle [OK]

Common Mistakes:

• Using type='button' on main submit button
• Placing buttons outside the form
• Using single dropdown button without main submit