Checkboxes and radios in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the name attribute in a group of radio buttons?

In Bootstrap forms, why do all radio buttons in the same group share the same name attribute?

A It makes the radio buttons larger and easier to click.

B It disables all radio buttons in the group.

C It styles the radio buttons with Bootstrap colors.

D It groups the radio buttons so only one can be selected at a time.

💡 Hint

Think about how radio buttons behave when grouped.

The name attribute groups radio buttons so that only one button in that group can be selected at a time. This is standard HTML behavior and Bootstrap uses it as well.

📝 Syntax

intermediate

Which option correctly creates a Bootstrap styled checkbox?

Select the correct Bootstrap 5 checkbox code snippet that will render a checkbox with label "Subscribe".

A

<div class="checkbox">
  <input type="checkbox" id="subscribeCheck">
  <label>Subscribe</label>
</div>

B

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="subscribeCheck">
  <label class="form-check-label" for="subscribeCheck">Subscribe</label>
</div>

C

<input type="checkbox" class="checkbox" id="subscribeCheck">
<label for="subscribeCheck">Subscribe</label>

D

<div class="form-group">
  <input type="checkbox" class="form-control" id="subscribeCheck">
  <label for="subscribeCheck">Subscribe</label>
</div>

💡 Hint

Bootstrap checkboxes use form-check and form-check-input classes.

Bootstrap 5 requires wrapping the checkbox input in a div with class form-check. The input uses class form-check-input and the label uses form-check-label with a matching for attribute.

❓ rendering

advanced

What will be the visual result of this Bootstrap radio button code?

Given the following code, what will the user see in the browser?

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="radio" name="colorOptions" id="redOption" value="red" checked>
  <label class="form-check-label" for="redOption">Red</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="colorOptions" id="blueOption" value="blue">
  <label class="form-check-label" for="blueOption">Blue</label>
</div>

A Two radio buttons labeled 'Red' and 'Blue', with 'Red' selected by default.

B Two checkboxes labeled 'Red' and 'Blue', both unchecked.

C Two radio buttons labeled 'Red' and 'Blue', both selected.

D A dropdown menu with options 'Red' and 'Blue'.

💡 Hint

Look at the type and checked attributes.

The code creates two radio buttons with the same name, so only one can be selected. The 'Red' option has the checked attribute, so it is selected by default.

❓ selector

advanced

Which CSS selector correctly targets only checked Bootstrap checkboxes?

You want to style only the checkboxes that are checked in a Bootstrap form. Which CSS selector will do this?

A input.form-check-input[type="checkbox"]:checked + label.form-check-label

B input[type="checkbox"]:checked

C .form-check-input:checked

D label.form-check-label:checked

💡 Hint

Remember the label is a sibling after the input.

Bootstrap checkboxes have the input and label as siblings inside div.form-check. To style the label when the checkbox is checked, use the adjacent sibling selector + label.form-check-label after the checked input.

❓ accessibility

expert

Which practice improves accessibility for Bootstrap radio buttons?

To make Bootstrap radio buttons accessible for screen readers and keyboard users, which practice is best?

A Wrap radio inputs inside <code>div</code> without labels and use placeholder text.

B Add <code>aria-hidden="true"</code> to all radio inputs.

C Use <code>label</code> elements with <code>for</code> attributes matching the input <code>id</code>.

D Use only colors to indicate which radio button is selected.

💡 Hint

Think about how screen readers identify form controls.

Associating label elements with inputs via matching for and id attributes helps screen readers announce the label when the input is focused. This is essential for accessibility.