online courses

Sunday, March 8, 2026

Assignment Checkboxs Radio Buttons And Switches

Assignment

Use Bootstrap form components.

Implement checkboxes, radio buttons, and switches.

Create a clean and responsive form layout.

Apply Bootstrap classes for styling form controls.

Assignment creates a User Preference Form using Bootstrap. The form should collect information about a user's interests and preferences using checkboxes, radio buttons, and toggle switches.

4. Requirements

1. Include Bootstrap

Add the Bootstrap CDN in the HTML file.

2. Form Sections

Your form must contain the following sections:

A. Hobbies (Checkboxes)

Allow users to select multiple hobbies.

Example options:

Reading

Traveling

Gaming

Music

Sports

B. Gender (Radio Buttons)

Allow the user to select only one option.

Options:

Male

Female

Other

C. Notification Settings (Switches)

Create toggle switches for settings.

Options:

Email Notifications

SMS Notifications

Push Notifications

5. Example Layout

Form should include:

Page title

Bootstrap container

Styled form controls

Submit button

6. Sample Code Structure

Html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Form Assignment</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h2>User Preference Form</h2>

<form>

<h4>Hobbies</h4>

<div class="form-check">

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

<label class="form-check-label">Reading</label>

</div>

<div class="form-check">

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

<label class="form-check-label">Traveling</label>

</div>

<div class="form-check">

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

<label class="form-check-label">Gaming</label>

</div>

<h4 class="mt-3">Gender</h4>

<div class="form-check">

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

<label class="form-check-label">Male</label>

</div>

<div class="form-check">

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

<label class="form-check-label">Female</label>

</div>

<h4 class="mt-3">Notifications</h4>

<div class="form-check form-switch">

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

<label class="form-check-label">Email Notifications</label>

</div>

<div class="form-check form-switch">

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

<label class="form-check-label">SMS Notifications</label>

</div>

<br>

<button class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

7. Submission Requirements

must submit:

index.html file

Screenshots of the output

Brief explanation (5–6 lines)

8. Evaluation Criteria

Criteria

Marks

Proper Bootstrap usage

5

Checkbox implementation

5

Radio button implementation

5

Switch implementation

5

UI design & layout

5

Total: 25 Marks

Complete This Assignment And Submit It On My Contact Page

Thursday, March 5, 2026

Bootstrap Module 36

#Online Courses

Bootstrap Module 36

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Tuesday, March 3, 2026

Bootstrap Framework HTML, CSS & Responsive Design

Monday, March 2, 2026

“Unlock the Secret Code: How to Become a High-Demand Bootscript Developer in 2026 and Beyond”

Sunday, March 1, 2026

Bootstrap Module 36 “The Hidden Power of Bootstrap Checkboxes, Radios & Switches 🤯”

Bootstrap Module 36

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Friday, February 27, 2026

Bootstrap Roadmap

Bootstrap Complete Roadmap

Beginner to Advanced

Professional UI Development

Prerequisites

HTML Fundamentals

CSS Basics

Responsive Design Concepts

What is Bootstrap?

CSS Framework

Mobile-first

Rapid UI Development

Bootstrap Installation

CDN

Local Files

NPM

Grid System

Containers

Rows & Columns

Breakpoints

Typography

Headings

Text Utilities

Font Styles

Images & Tables

Responsive Images

Styled Tables

Buttons & Forms

Button Variants

Form Controls

ValidationNavigation

Navbar

Breadcrumbs

PaginationCards & Layouts

Cards

Media ObjectsInteractive Components

Modal

Dropdown

CarouselUtilities

Spacing

Flexbox

ColorsCustomization

Custom CSS

SASS

ThemesPerformance & A11Y

Optimization

Accessibility Projects

Portfolio

Dashboard

Web AppProfessional Skills

Best Practices

InterviewsThank You

Bootstrap Mastery

Thursday, February 26, 2026

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

Wednesday, February 25, 2026

Web Stories Islamic State

Tuesday, February 24, 2026

Assignment Input Group And Floating L

Assignment Tasks

Task 1: Basic Input Groups

Create a form section that includes:

Email input with @ symbol as a pre

Price input with ₹ as a pre

Website URL input with .com as a Fix

✅ Requirements:

Use Bootstrap Input Group classes

Inputs must be properly aligned

Add meaningful placeholders

Task 2: Floating Labels Form

Design a Login Form using Floating Labels:

Email Address

Password

Login button

✅ Requirements:

Use .form-floating

Labels must float on focus and input

Fields must be vertically aligned

Task 3: Combined Input Group + Floating Label

Create a User Registration Form that includes:

Username

Email address

Phone number with country code (+91)

Password field

✅ Requirements:

Combine Input Groups with Floating Labels correctly

Ensure labels do not overlap input content

Maintain consistent spacing

Task 5: UI & Accessibility Enhancements

Add aria-label where necessary

Use proper type attributes

Ensure readable labels and placeholders

📂 Submission Guidelines

Submit one HTML file

Bootstrap must be linked via CDN

File name: input-group-floating-labels.html

Code must be clean and well-indented

📊 Evaluation

Criteria

Marks

Input Groups Implementation

10

Floating Labels Usage

10

Combined Form Design

15

Responsive Layout

10

Accessibility & UI

5

Total

50 Marks

Complete This Assignment And Send It To Me 👩‍💻

Sunday, February 22, 2026

Bootstrap Partical View Inputs Group And Floating Labels

Bootstrap Module 35

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Saturday, February 21, 2026

Roza Special Bayan

Friday, February 20, 2026

Bootstrap Module 35

#Online Courses

Bootstrap Module 35

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Subscribe to: Comments (Atom)