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 

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

Web Stories Islamic State

 

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 👩‍💻

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

Roza Special Bayan

 

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

Bootstrap Module 35

  Module 35 : Input Groups & Floating Labels 

1. Input Groups – Concept & Purpose

What is an Input Group?

An Input Group allows you to attach text, icons, buttons, or dropdowns before or after an input field.

Why Input Groups Are Important

Improve clarity of input purpose

Reduce form clutter

Enhance user example (UX)

Ideal for:

                

Currency inputs

Search bars

Username/email fields

verification inputs

2. Structure of Input Groups

Basic Syntax

<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username"> </div>

Key Components

Component

Description

input-group

Wrapper container

input-group-text

Text, icons, or symbols

form-control

Input field

3. Input Group Examples

Example 1: Email Input

<div class="input-group mb-3"> <span class="input-group-text">@</span> <input type="email" class="form-control" placeholder="Email address"> </div>

Explanation:

@ symbol tells the user it’s an email

Reduces confusion

Improves form speed

Example 2: Currency Input

<div class="input-group mb-3"> <span class="input-group-text">₹</span> <input type="number" class="form-control" placeholder="Amount"> </div>

Use Case:

E-commerce checkout, payment forms, invoices

Example 3: Button Inside Input Group

<div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <button class="btn btn-primary">Search</button> </div>

Use Case:

Search bars, filters, dashboards

4. Floating Labels – Concept & Purpose

What Are Floating Labels?

Floating labels are labels that start inside the input field and move upward when the user types.

Why Floating Labels Matter

Saves space

Cleaner UI

Better mobile experience

Avoids placeholder-only issues

5. Floating Labels – Basic Structure

Syntax

<div class="form-floating mb-3"> <input type="text" class="form-control" id="name" placeholder="Name"> <label for="name">Full Name</label> </div>

Important Rules

placeholder is mandatory (even if empty)

Label must come after input

Works best with text-based inputs

6. Floating Label Examples

Example 1: Login Form

<div class="form-floating mb-3"> <input type="email" class="form-control" id="email" placeholder="Email"> <label for="email">Email address</label> </div> <div class="form-floating"> <input type="password" class="form-control" id="password" placeholder="Password"> <label for="password">Password</label> </div>

UX Benefit:

Label is always visible

No confusion after typing

7. Combining Input Groups with Floating Labels

Advanced Example

<div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="text" class="form-control" id="username" placeholder="Username"> <label for="username">Username</label> </div> </div>

Explanation

Input Group provides context (@)

Floating Label provides clarity

Works well for modern login/signup forms

8. Accessibility 

✔ Always use <label>

✔ Use meaningful placeholders

✔ Avoid icons without text for screen readers

✔ Maintain proper contrast

Accessibility Tip

<label for="email" class="visually-hidden">Email</label>

9. Exercises

Exercise 1

Create a registration form with:

Name (Floating Label)

Email (Input Group with @)

Password (Floating Label)

Exercise 2

Create a payment form with:

Currency symbol

Amount input

Submit button inside input group

10. Title: Designing a Professional Login Form

Objective

Build a responsive login form using Input Groups & Floating Labels.

Steps

Include Bootstrap CDN

Create container and card

Add floating label inputs

Add input group icons

Test responsiveness

Code

<div class="container mt-5"> <div class="card p-4"> <h3 class="mb-3">Login</h3> <div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="email" class="form-control" id="loginEmail" placeholder="Email"> <label for="loginEmail">Email</label> </div> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="loginPass" placeholder="Password"> <label for="loginPass">Password</label> </div> <button class="btn btn-primary w-100">Login</button> </div> </div>

Expected Output

Clean modern UI

Responsive layout

User-friendly interaction

11. Research 

UI/UX Insights

Floating labels reduce form abandonment by up to 20%

Input groups improve form completion speed

Clear context reduces validation errors

Technical Research Areas

Bootstrap form rendering behavior

CSS positioning of floating labels

ARIA roles and accessibility testing

Comparison with Material UI forms

Advanced Research 

🔍 Compare:

Bootstrap Floating Labels

Material Design Floating Labels

Custom CSS solutions

Document:

Performance

Accessibility

Browser compatibility

Summary

Input Groups enhance context

Floating Labels improve clarity

Combined usage creates professional UI

Bootstrap simplifies complex form design

Essential skill for modern frontend developers

#Web Stories

 

Assignment Forms Validation & Custom Controls

 Assignment: Forms – Validation & Custom Controls.

Create a Responsive Registration Form with Validation & Custom Controls.

 Assignment Description

Design and develop a Registration Form using Bootstrap.

The form must include built-in Bootstrap validation, custom-styled controls, and JavaScript validation logic.

 Tasks

🔹 Task 1: Form Layout (Bootstrap)

Create a responsive form using Bootstrap grid system with the following fields:

Full Name

Email Address

Password

Confirm Password

Mobile Number

Gender (Radio Buttons)

Skills (Checkboxes – minimum 3)

Country (Dropdown)

Agree to Terms & Conditions (Checkbox)

Submit Button

Reset Button

✔ Use Bootstrap classes like:

form-control, form-check, form-check-input, form-label, btn

🔹 Task 2: Form Validation

Apply the following validation rules:

Full Name → Required, minimum 3 characters

Email → Must be valid email format

Password → Minimum 8 characters

Confirm Password → Must match password

Mobile Number → Exactly 10 digits

Gender → Required

Skills → At least one must be selected

Country → Must select a valid option

Terms & Conditions → Must be checked

✔ Use:

Bootstrap validation classes (is-valid, is-invalid)

HTML5 validation attributes

JavaScript validation for at least 3 fields

🔹 Task 3: Custom Controls

Customize the following using Bootstrap & CSS:

Styled radio buttons

Styled checkboxes

Custom submit button

Input focus effects

Validation error messages

✔ Error messages must be shown using:

.invalid-feedback

.valid-feedback

______________________________________________

📂 Submission Files

Students must submit:

                   👩‍🎓

index.html

style.css (optional customization)

script.js

Screenshots:

Empty form

Validation errors

Successful submission

📊 Marks Distribution

Criteria

Marks

Bootstrap Form Layout

20

Validation Rules

30

Custom Controls Styling

20

JavaScript Logic

20

UI & Responsiveness

10

Total

100

Complete This Assignments And Send It To me