0
0
Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.
Progress0 / 4 steps
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
Need a 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
Need a 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
Need a 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
Need a hint?

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