Button groups in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a button group in Bootstrap?

A button group in Bootstrap is a way to group multiple buttons together on a single line, making them look connected and organized.

beginner

Which Bootstrap class is used to create a button group container?

The class .btn-group is used to wrap buttons and create a button group.

intermediate

How do you make a vertical button group in Bootstrap?

Add the class .btn-group-vertical to the container instead of .btn-group to stack buttons vertically.

intermediate

What role does the aria-label attribute play in button groups?

It improves accessibility by describing the group of buttons to screen readers, helping users understand the purpose of the group.

intermediate

How can you add spacing between buttons inside a button group?

Button groups remove spacing by default to connect buttons. To add space, you can use margin utilities like me-2 on buttons or avoid grouping them.

Which class creates a horizontal button group in Bootstrap?

A .btn-group

B .btn-group-vertical

C .btn-group-horizontal

D .btn-group-row

The class .btn-group creates a horizontal button group. .btn-group-vertical stacks buttons vertically.

What is the purpose of using aria-label on a button group?

A To add color to buttons

B To change button size

C To make buttons clickable

D To describe the button group for screen readers

aria-label helps screen readers understand the purpose of the button group, improving accessibility.

How do you create a vertical stack of buttons in Bootstrap?

A Use .btn-group and add flex-column

B Use .btn-group-vertical

C Use .btn-vertical

D Use .btn-stack

Bootstrap provides the .btn-group-vertical class to stack buttons vertically.

If you want buttons in a group to have space between them, what should you do?

A Add margin classes like me-2 to buttons

B Use .btn-group with no changes

C Use .btn-space class

D Add padding to the button group container

Button groups connect buttons tightly by default. Adding margin classes like me-2 adds space between buttons.

Which HTML element is recommended to wrap buttons in a Bootstrap button group?

A <nav>

B <section>

C <div>

D <button>

A

with the .btn-group class is commonly used to wrap buttons in a group.

Explain how to create a horizontal and a vertical button group in Bootstrap. Include accessibility considerations.

Think about the container classes and how screen readers understand groups.

Describe how you can add spacing between buttons inside a Bootstrap button group and why you might want to do that.

Consider Bootstrap's default button group behavior and margin utilities.