Button groups in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap button group?

Look at the following HTML code using Bootstrap 5. What will you see rendered in the browser?

Bootsrap

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

A Three separate blue buttons spaced apart horizontally with no border connecting them.

B A vertical stack of three blue buttons with equal spacing between them.

C A horizontal group of three blue buttons touching each other with no gaps, forming a single connected shape.

D Three blue buttons arranged diagonally from top-left to bottom-right.

💡 Hint

Bootstrap's btn-group class groups buttons horizontally with no gaps.

The btn-group class in Bootstrap groups buttons side-by-side horizontally with no gaps, making them appear connected as a single unit.

❓ selector

intermediate

Which attribute ensures accessibility for a Bootstrap button group?

In Bootstrap button groups, which attribute is important to add for screen readers to understand the group?

A aria-label

B data-toggle

C role="button"

D tabindex="0"

💡 Hint

Think about how screen readers identify groups of controls.

The aria-label attribute provides a descriptive label for the button group, helping screen readers announce the group purpose.

📝 Syntax

advanced

What error occurs with this Bootstrap button group code?

Examine this code snippet. What error or problem will it cause when rendered?

Bootsrap

<div class="btn-group" aria-label="Group">
  <button class="btn btn-secondary">One</button>
  <button class="btn btn-secondary">Two</button>
  <button class="btn btn-secondary">Three</button>
</div>

A Buttons will be grouped horizontally but will not be clickable.

B Screen readers will not recognize the buttons as a group because the role="group" attribute is missing.

C Buttons will be grouped but have no color styling because btn-secondary is invalid.

D Buttons will stack vertically because btn-group requires an extra class for horizontal layout.

💡 Hint

Bootstrap uses role="group" to identify button groups for assistive technologies.

Without role="group", assistive technologies may not recognize the buttons as a group, reducing accessibility.

❓ layout

advanced

How to create a vertical button group in Bootstrap?

Which class combination creates a vertical stack of buttons grouped together in Bootstrap 5?

A Use class="btn-group-vertical" on the container div.

B Use class="btn-group" and add CSS flex-direction: column manually.

C Use class="btn-vertical" on each button inside btn-group.

D Use class="btn-group" with role="vertical" attribute.

💡 Hint

Bootstrap provides a special class for vertical button groups.

The btn-group-vertical class stacks buttons vertically with proper spacing and styling.

🧠 Conceptual

expert

Why use role="group" with aria-label in Bootstrap button groups?

What is the main reason to add role="group" and aria-label attributes to a Bootstrap button group container?

A To make buttons responsive and adjust their size on different screen widths.

B To enable Bootstrap's JavaScript to activate button toggling functionality.

C To apply default Bootstrap styling for grouped buttons automatically.

D To improve keyboard navigation and provide screen readers a clear description of the button group.

💡 Hint

Think about accessibility and how assistive devices interpret grouped controls.

role="group" defines the container as a group of related controls, and aria-label gives a descriptive name, helping screen readers and keyboard users understand the group context.