Bootstrap Module 36

  Module 36 : Checkboxes, Radios, Switches

1. Introduction 

web applications, form controls are essential for collecting user input. Among them:

Checkboxes → Multiple selections allowed

Radio Buttons → Single selection from a group

Switches → Toggle between ON/OFF states (modern UI)

Bootstrap (commonly referred to as Bootscript) provides pre-styled, accessible, responsive form components that save development time and ensure UI consistency.

2. Why Bootstrap Form Controls Matter

Traditional HTML Problem

Plain HTML checkboxes and radios:

Look different across browsers

Are hard to style

Provide poor UX on mobile

Bootstrap Solution

Bootstrap:

Normalizes appearance across devices

Adds accessibility (ARIA support)

Supports modern UI (switches)

Uses utility classes for spacing & alignment

Industry Insight:

Most enterprise dashboards (Admin Panels, CRM, LMS systems) use Bootstrap-style toggles instead of default inputs to improve usability and clarity.

3. Checkboxes in Bootstrap

3.1 Concept

A checkbox allows:

Zero, one, or multiple selections

Independent choices

Example use cases:

Select interests

Accept terms

Choose multiple categories

3.2 Basic Checkbox Structure

<div class="form-check"> <input class="form-check-input" type="checkbox" id="check1"> <label class="form-check-label" for="check1"> Accept Terms & Conditions </label> </div>

Explanation

Element

Purpose

form-check

Wrapper for checkbox

form-check-input

Styles checkbox

form-check-label

Clickable label

Bootstrap automatically aligns and spaces these elements.

3.3 Multiple Checkboxes Example

<div class="form-check"> <input class="form-check-input" type="checkbox" id="html"> <label class="form-check-label" for="html">HTML</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="css"> <label class="form-check-label" for="css">CSS</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="js"> <label class="form-check-label" for="js">JavaScript</label> </div>

✔ User can select multiple skills

3.4 Disabled Checkbox

<input class="form-check-input" type="checkbox" disabled>

Point:

Use disabled state when:

Option is unavailable

Permission-based UI

4. Radio Buttons in Bootstrap

4.1 Concept

Radio buttons allow:

Only one selection

Group-based choice

                

examples:

Gender

Payment method

Subscription plan

4.2 Basic Radio Button Example

<div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="male"> <label class="form-check-label" for="male">Male</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="female"> <label class="form-check-label" for="female">Female</label> </div>

Important Rule (Exam Tip)

✔ Same name attribute = one selection only

4.3 Pre-selected Radio Button

<input class="form-check-input" type="radio" name="plan" checked>

Used for:

Default plans

Recommended options

5. Switches (Toggle Buttons)

5.1 Concept

Switches represent:

ON / OFF states

Boolean values

Examples:

Dark mode

Notifications

Account activation

Bootstrap uses checkboxes styled as switches.

5.2 Basic Switch Example

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="darkMode"> <label class="form-check-label" for="darkMode"> Enable Dark Mode </label> </div>

Explanation

Class

Function

form-switch

Converts checkbox into switch

form-check-input

Toggle element

5.3 Checked Switch (ON by Default)

<input class="form-check-input" type="checkbox" checked>

6. Inline Checkboxes & Radios

<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox"> <label class="form-check-label">Option 1</label> </div>

Use case:

Filters, toolbars, compact forms

7. Layout & Alignment with Bootstrap Grid

<div class="row"> <div class="col-md-6"> <div class="form-check"> <input class="form-check-input" type="checkbox"> <label class="form-check-label">Left Option</label> </div> </div> </div>

✔ Demonstrates responsive form control placement

8. JavaScript Interaction 

Reading Checkbox Value

<script> document.getElementById("darkMode").addEventListener("change", function() { if(this.checked){ console.log("Dark Mode ON"); } else { console.log("Dark Mode OFF"); } }); </script>

Professional Insight:

Switches are just checkboxes → checked property controls logic.

9. Accessibility & (Research-Based)

✔ Always use <label>

✔ Use meaningful IDs

✔ Avoid tiny clickable areas

✔ Provide default selections carefully

✔ Use switches for state, radios for choice

10. Exercises 

Exercise 1 (Beginner)

Create:

3 checkboxes for hobbies

1 radio group for gender

Exercise 2 (Intermediate)

Create:

Notification ON/OFF switch

Console log message on toggle

Exercise 3 (Advanced)

Create:

Settings form using switches

Enable/disable sections dynamically

11. Common Mistakes 

❌ Using different name attributes for radios

❌ Missing labels

❌ Using switches for multiple options

❌ Forgetting accessibility

12. Example

User Settings Page

Email Notifications → Switch

Theme Selection → Radio

Interests → Checkboxes

13. Summary

Component

Purpose

Checkbox

Multiple selection

Radio

Single selection

Switch

ON/OFF state

Bootstrap makes these:✔ Responsive

✔ Accessible

✔ Professional UI-ready