Checkboxes and radios in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main difference between a checkbox and a radio button?

A checkbox allows selecting multiple options at once, while a radio button allows selecting only one option from a group.

beginner

How do you group radio buttons so only one can be selected at a time?

Give all radio buttons the same name attribute value to group them together.

beginner

In Bootstrap, which class is used to style a checkbox or radio button?

Use the <code>.form-check</code> class on a container and <code>.form-check-input</code> on the input element.

intermediate

How can you make a checkbox or radio button disabled in Bootstrap?

Add the <code>disabled</code> attribute to the input element and optionally add the <code>.disabled</code> class to the label.

beginner

Why is it important to use labels with checkboxes and radio buttons?

Labels improve accessibility by making the clickable area larger and helping screen readers identify the input purpose.

Which Bootstrap class should you add to the input element of a checkbox?

A .input-checkbox

B .form-check-input

C .checkbox-input

D .form-control

Bootstrap uses the .form-check-input class to style checkbox and radio inputs.

How do you ensure only one radio button can be selected in a group?

A Give all radio buttons the same name

B Give all radio buttons the same id

C Wrap them in a <div>

D Add the disabled attribute

Radio buttons with the same name attribute belong to one group and only one can be selected.

What attribute disables a checkbox or radio button?

A disabled

B block

C inactive

D readonly

The disabled attribute makes the input unclickable and grayed out.

Why should you always use a <label> with checkboxes and radios?

A To make inputs bigger

B To add color

C To increase clickable area and improve accessibility

D To disable inputs

Labels link text to inputs, making them easier to use and accessible for screen readers.

Which container class wraps a checkbox or radio in Bootstrap?

A .form-group

B .form-control

C .input-group

D .form-check

The .form-check class is used to wrap checkboxes and radios for proper Bootstrap styling.

Explain how to create a group of radio buttons in Bootstrap that allows only one selection.

Think about grouping and styling with Bootstrap classes.

Describe why labels are important for checkboxes and radio buttons and how to connect them properly.

Consider users who rely on keyboard or screen readers.