Split button dropdowns in Bootsrap - Browser Rendering Trace

Render Flow - Split button dropdowns

[Read <div class='btn-group'>] -> [Create button group container] -> [Read main <button>] -> [Create main button node] -> [Read dropdown toggle <button>] -> [Create toggle button node] -> [Read <ul> dropdown menu] -> [Create dropdown menu node] -> [Attach event listeners for toggle] -> [Render buttons side-by-side] -> [Render dropdown menu hidden]

The browser reads the button group container, creates two buttons side-by-side: a main action button and a smaller toggle button. The dropdown menu is created but hidden until toggled.

Render Steps - 5 Steps

Code Added:<div class="btn-group" role="group"> container

Before

[ ]

→

After

[btn-group container: empty box]

The container for the split button group is created, reserving space for buttons inside.

🔧 Browser Action:Creates container block element with role=group for accessibility

Code Sample

A split button with a main action on the left and a dropdown toggle on the right that reveals a menu when clicked.

Bootsrap

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Action</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="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>

Render Quiz - 3 Questions

After step 3, how are the buttons visually arranged inside the btn-group?

A Two buttons stacked vertically

B One large button with an arrow inside it

C Two buttons side-by-side: a large main button and a smaller toggle button with an arrow

D Only one button visible

Common Confusions - 3 Topics

Why does the dropdown menu appear below the toggle button and not the main button?

The dropdown toggle button controls the menu. It is separate from the main action button, so the menu aligns below the toggle button only (see render_step 5).

💡 Dropdown menus appear below the toggle button, not the main action button.

Why is the toggle button smaller than the main button?

The class dropdown-toggle-split makes the toggle button narrower to visually separate it from the main action button (see render_step 3).

💡 Split toggle buttons are smaller to show they have a different function.

Why does clicking the main button not open the dropdown menu?

Only the toggle button has the dropdown toggle behavior attached, so clicking the main button triggers the main action only (see render_step 5).

💡 Main button triggers action; toggle button opens dropdown.

Property Reference

Property/Class	Effect	Visual Behavior	Common Use
btn-group	Groups buttons inline	Buttons appear side-by-side with no line breaks	Group related buttons
btn	Styles button	Button has padding, background color, border	Clickable button style
btn-primary	Primary color style	Button background is blue (default), text white	Highlight main action
dropdown-toggle	Adds dropdown arrow	Small arrow icon appears on button	Indicates dropdown functionality
dropdown-toggle-split	Smaller toggle button	Toggle button narrower, separated visually	Split button dropdown toggles
dropdown-menu	Dropdown container	Hidden by default, appears below toggle	Dropdown list of options

Concept Snapshot

Split button dropdowns combine a main action button and a smaller toggle button side-by-side. The toggle button has an arrow and controls showing/hiding the dropdown menu. Use btn-group to group buttons inline. dropdown-toggle-split makes the toggle button smaller. Dropdown menu is hidden by default and appears below toggle on click.