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.

Practice

1. What is the main purpose of using the btn-group class in Bootstrap?

easy

A. To group multiple buttons side by side as a single unit

B. To change the color of a button

C. To add icons inside buttons

D. To create dropdown menus

Solution

1. Step 1: Understand the role of btn-group

   The btn-group class is designed to place buttons next to each other horizontally, making them appear as one group.

2. Step 2: Compare with other options

   Changing colors, adding icons, or dropdowns require different classes or components, not btn-group.

3. Final Answer:

   To group multiple buttons side by side as a single unit -> Option A

4. Quick Check:

   Button groups = group buttons side by side [OK]

Hint: Remember: btn-group means buttons together horizontally [OK]

Common Mistakes:

• Confusing btn-group with button color classes
• Thinking btn-group creates dropdowns
• Assuming btn-group adds icons automatically

2. Which of the following is the correct syntax to create a horizontal button group with three buttons labeled 'One', 'Two', and 'Three'?

easy

A. OneTwoThree

B. OneTwoThree

C. OneTwoThree

D. OneTwoThree

Solution

1. Step 1: Check the container class and role

   The correct class for horizontal grouping is btn-group with role='group' for accessibility.

2. Step 2: Verify button elements and labels

   Buttons inside should have btn and style classes like btn-primary. The role must be 'group', not 'button'.

3. Final Answer:

   Correct horizontal button group with role='group' -> Option B

4. Quick Check:

   btn-group + role='group' = horizontal group [OK]

Hint: Use role='group' with btn-group for horizontal groups [OK]

Common Mistakes:

• Using btn-group-vertical for horizontal groups
• Setting role='button' instead of role='group'
• Missing role attribute for accessibility

3. What will be the visual result of this code snippet?

<div class='btn-group btn-group-lg' role='group' aria-label='Large button group'>
  <button type='button' class='btn btn-secondary'>Left</button>
  <button type='button' class='btn btn-secondary'>Middle</button>
  <button type='button' class='btn btn-secondary'>Right</button>
</div>

medium

A. Three small buttons stacked vertically

B. Three large buttons stacked vertically

C. Three medium buttons aligned horizontally side by side

D. Three large buttons aligned horizontally side by side

Solution

1. Step 1: Analyze the classes used

   The btn-group class groups buttons horizontally. The btn-group-lg class makes buttons larger in size.

2. Step 2: Understand the layout effect

   Buttons inside will appear side by side horizontally, not stacked vertically, and will be large due to btn-group-lg.

3. Final Answer:

   Three large buttons aligned horizontally side by side -> Option D

4. Quick Check:

   btn-group + btn-group-lg = large horizontal buttons [OK]

Hint: btn-group-lg means bigger horizontal buttons [OK]

Common Mistakes:

• Confusing vertical stacking with horizontal grouping
• Ignoring size classes like btn-group-lg
• Assuming default size when btn-group-lg is present

4. Identify the error in this Bootstrap button group code:

<div class='btn-group' aria-label='Button group'>
  <button class='btn btn-primary'>A</button>
  <button class='btn btn-primary'>B</button>
  <button class='btn btn-primary'>C</button>
</div>

medium

A. Buttons should use type='submit' instead of default

B. Class btn-primary is invalid for buttons

C. Missing role='group' attribute on the container div

D. The container should be a nav element instead of div

Solution

1. Step 1: Check accessibility roles

   Bootstrap button groups require role='group' on the container for screen readers to understand the grouping.

2. Step 2: Validate other attributes and tags

   Button type defaults to 'button' which is fine. btn-primary is a valid class. Using div is correct for button groups.

3. Final Answer:

   Missing role='group' attribute on the container div -> Option C

4. Quick Check:

   Button groups need role='group' for accessibility [OK]

Hint: Always add role='group' on btn-group container for accessibility [OK]

Common Mistakes:

• Omitting role='group' on the button group container
• Confusing button type attribute necessity
• Thinking btn-primary is invalid

5. You want to create a vertical button group with three buttons labeled 'Yes', 'No', and 'Maybe' that is also large in size. Which is the correct Bootstrap code snippet?

hard

A. \n Yes\n No\n Maybe\n

B. \n Yes\n No\n Maybe\n

C. \n Yes\n No\n Maybe\n

D. \n Yes\n No\n Maybe\n

Solution

1. Step 1: Identify vertical grouping class

   The class btn-group-vertical makes the buttons stack vertically.

2. Step 2: Combine vertical grouping with large size

   Adding btn-group-lg alongside btn-group-vertical on the container makes the entire group large and vertical.

3. Step 3: Check button classes

   Buttons have appropriate color classes and do not need individual btn-lg if the group is large.

4. Final Answer:

   Use btn-group-vertical btn-group-lg on container with role='group' -> Option A

5. Quick Check:

   btn-group-vertical + btn-group-lg = large vertical group [OK]

Hint: Combine btn-group-vertical and btn-group-lg on container for large vertical group [OK]

Common Mistakes:

• Using btn-group-lg without btn-group-vertical for vertical layout
• Adding btn-lg to buttons instead of group container
• Mixing btn-group and btn-group-vertical classes incorrectly