Checkboxes and radios in Bootsrap - Browser Rendering Trace

Render Flow - Checkboxes and radios

Read <form>

→Read <div class='form-check'>

↓

Read <input type='checkbox' or 'radio'>

→Create input element

↓

Read <label>

→Create label linked to input

↓

Apply Bootstrap styles

→Render styled checkbox or radio

The browser reads the form and its children, creates input and label elements, then applies Bootstrap's CSS classes to style checkboxes and radios visually.

Render Steps - 6 Steps

Code Added:<input type="checkbox"> element added

Before

[empty form area]

→

After

[ ] Option 1

Adding the checkbox input creates a small square box where users can click to toggle selection.

🔧 Browser Action:Creates input element and reserves space for checkbox UI

Code Sample

This code produces a vertical list of a styled checkbox and a radio button with labels, aligned horizontally and spaced nicely.

Bootsrap

<form>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">Option 1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioGroup" id="radio1">
    <label class="form-check-label" for="radio1">Choice A</label>
  </div>
</form>

Bootsrap

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  cursor: pointer;
}
.form-check-label {
  cursor: pointer;
  user-select: none;
}

Render Quiz - 3 Questions

After applying render_step 3, how are the checkbox and label arranged visually?

A Stacked vertically with label below checkbox

B Horizontally aligned with label to the right of checkbox

C Label overlaps checkbox

D Checkbox is hidden and only label shows

Common Confusions - 3 Topics

Why does clicking the label toggle the checkbox or radio?

Because the label's for attribute matches the input's id, clicking the label activates the input, improving accessibility and usability (see render_step 2 and 5).

💡 Labels linked to inputs act like clicking the input itself.

Why are the checkbox and label not stacked vertically by default?

The container uses flexbox (form-check class) to align them horizontally and center vertically, making the UI cleaner and easier to scan (see render_step 3).

💡 Flexbox aligns items side by side by default.

Why do radio buttons in the same group allow only one selection?

Because they share the same name attribute, the browser enforces only one radio selected at a time, unlike checkboxes which are independent (see render_step 4).

💡 Same name radios form exclusive groups.

Property Reference

Property/Class	Value/Type	Visual Effect	Common Use
form-check	class	Creates flex container aligning input and label horizontally	Wraps checkbox or radio for layout
form-check-input	class	Styles input size, cursor, and spacing	Applied to checkbox or radio inputs
form-check-label	class	Styles label cursor and disables text selection	Applied to labels for inputs
input type	checkbox	Square box for multiple selections	Select multiple options
input type	radio	Circular button for single choice in group	Select one option from group

Concept Snapshot

Checkboxes and radios use <input> elements with types 'checkbox' or 'radio'. Labels linked by 'for' attribute improve accessibility and toggle inputs. Bootstrap's 'form-check' class uses flexbox to align inputs and labels horizontally. 'form-check-input' and 'form-check-label' classes style size, spacing, and cursor. Radios with the same 'name' attribute form exclusive selection groups.