Button groups in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic button group container.

Bootsrap

<div class="btn-group" role="[1]">
  <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>

Drag options to blanks, or click blank then click option'

Abutton

Bmenu

Cgroup

Dtoolbar

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="button" instead of role="group"

Omitting the role attribute

Using an incorrect role like "menu"

The role="group" attribute tells assistive technologies this container groups buttons.

2fill in blank

medium

Complete the code to add a vertical button group using Bootstrap classes.

Bootsrap

<div class="btn-group-[1]" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

Drag options to blanks, or click blank then click option'

Ainline

Bstacked

Chorizontal

Dvertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using btn-group-horizontal which does not exist

Using btn-group-inline which is not a Bootstrap class

Forgetting the btn-group prefix

The class btn-group-vertical arranges buttons stacked vertically.

3fill in blank

hard

Fix the error in the code to correctly create a button toolbar with two button groups.

Bootsrap

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="[1]" aria-label="First group">
    <button type="button" class="btn btn-info">1</button>
    <button type="button" class="btn btn-info">2</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-info">3</button>
    <button type="button" class="btn btn-info">4</button>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Agroup

Btoolbar

Cbutton

Dmenu

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="button" for groups inside toolbar

Using role="toolbar" for inner groups

Omitting the role attribute

Each button group inside a toolbar should have role="group" for accessibility.

4fill in blank

hard

Fill in the blank to create a button group with radio buttons that toggle selection.

Bootsrap

<div class="btn-group" role="group" aria-label="[1]">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off">
  <label class="btn btn-outline-primary" for="option1">Option 1</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">Option 2</label>
</div>

Drag options to blanks, or click blank then click option'

Acheckbox

Btoggle buttons

Cradio

Dbutton group

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="checkbox" with radio inputs

Using an aria-label that does not describe the group

Omitting the aria-label attribute

The aria-label describes them as toggle buttons. Bootstrap uses role="group" for such radio toggle button groups.

5fill in blank

hard

Fill both blanks to create a responsive button group with justified buttons and accessibility labels.

Bootsrap

<div class="btn-group w-100" role="[1]" aria-label="[2]">
  <button type="button" class="btn btn-success">Left</button>
  <button type="button" class="btn btn-success">Center</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Drag options to blanks, or click blank then click option'

Avertical

Bgroup

CJustified button group

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Using btn-group-vertical for horizontal layout

Using role="toolbar" instead of role="group"

Missing aria-label or using unclear labels

The btn-group w-100 creates a horizontal full-width (justified appearance) button group. The role is group for accessibility. The aria-label describes the group as justified buttons.