Quran E Kareem Jumma Mubarak 🧕

 

Bootstrap Module 34

 

#Online Courses

 Bootstrap Module 34

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 34

  Module 34 Forms – Validation & Custom Controls. 

1. Understanding Forms in Bootstrap

What is a Form?

A form is a structured set of input controls used to collect data from users.

               

Common form elements:

Text inputs

Email fields

Passwords

Checkboxes

Radio buttons

Select dropdowns

File uploads

Bootstrap provides pre-styled form that improve:

Consistency

Responsiveness

Accessibility

Validation feedback

2. Bootstrap Form Validation – Concept

What is Form Validation?

Form validation ensures:

Correct data format

Required fields are filled

Invalid data is rejected before submission

Types of Validation

Client-side validation

Runs in the browser

Faster feedback

Uses HTML5 + Bootstrap + JavaScript

Server-side validation

Runs on the server

More secure

Outside Bootstrap’s scope but complements it

3. Bootstrap Validation 

Bootstrap builds on HTML5 validation using CSS classes:

Class

Purpose

.needs-validation

Activates Bootstrap validation

.was-validated

Shows validation results

.is-valid

Marks valid input

.is-invalid

Marks invalid input

.valid-feedback

Success message

.invalid-feedback

Error message

👉 Bootstrap does not validate automatically – you must trigger it using JavaScript.

4. Basic Form Validation

Step 1: HTML Form Structure

<form class="needs-validation" novalidate> <div class="mb-3"> <label class="form-label">Email</label> <input type="email" class="form-control" required> <div class="invalid-feedback"> Please enter a valid email address. </div> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>

Explanation

required → HTML5 validation rule

novalidate → disables browser default validation UI

.invalid-feedback → Bootstrap error message container

Step 2: JavaScript to Activate Validation

<script> (() => { 'use strict'; const forms = document.querySelectorAll('.needs-validation'); Array.from(forms).forEach(form => { form.addEventListener('submit', event => { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); })(); </script>

Deep Explanation

checkValidity() → checks all form fields

preventDefault() → stops form submission

.was-validated → triggers Bootstrap validation styles

5. Validation States – Visual Feedback

Valid State

<input type="text" class="form-control is-valid"> <div class="valid-feedback"> Looks good! </div>

Invalid State

<input type="text" class="form-control is-invalid"> <div class="invalid-feedback"> This field is required. </div>

 Tip

 how visual cues (green/red borders) improve UX and reduce form abandonment.

6. Custom Form Controls 

Why Custom Controls?

Default browser controls:

Look different across browsers

Offer limited styling

Bootstrap custom controls provide:

Uniform design

Better accessibility

Mobile-friendly UI

7. Custom Checkboxes & Radios

Custom Checkbox

<div class="form-check"> <input class="form-check-input" type="checkbox" id="terms" required> <label class="form-check-label" for="terms"> Accept Terms & Conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div>

Explanation

.form-check → wrapper

.form-check-input → input styling

.form-check-label → clickable label

Custom Radio Buttons

<div class="form-check"> <input class="form-check-input" type="radio" name="gender" required> <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>

8. Custom Select Dropdown

<select class="form-select" required> <option value="">Choose a country</option> <option>India</option> <option>USA</option> <option>UK</option> </select> <div class="invalid-feedback"> Please select a country. </div>

Key Difference

.form-select replaces default <select> styling

Fully responsive and keyboard-accessible

9. Custom Switches (Modern UI)

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="notify"> <label class="form-check-label" for="notify"> Enable Notifications </label> </div>

Use Case

Settings panels

Mobile-first designs

Toggle features

10. Registration Form

Features Included

Email validation

Password required

Terms checkbox

Bootstrap validation feedback

<form class="needs-validation" novalidate> <input type="email" class="form-control mb-3" placeholder="Email" required> <input type="password" class="form-control mb-3" placeholder="Password" required> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" required> <label class="form-check-label">Agree to terms</label> <div class="invalid-feedback">Required</div> </div> <button class="btn btn-success">Register</button> </form>

11. Exercises 

Exercise 1 

Create a login form with:

Email

Password

Validation messages

Exercise 2 

Build a feedback form with:

Textarea

Rating (radio buttons)

Submit validation

Exercise 3 

Create a multi-step form:

Step 1: Personal info

Step 2: Preferences

Step 3: Confirmation

12. Research 

UX Insights

Forms with inline validation reduce errors by 22%

Clear feedback improves completion rates

Minimal required fields = better conversion

Accessibility 

Always use <label>

Ensure keyboard navigation

Use .invalid-feedback for screen readers

Industry Usage

Bootstrap validation is widely used in:

Admin dashboards

E-commerce checkouts

SaaS onboarding forms

13. Common Mistakes 

❌ Forgetting novalidate

❌ No feedback messages

❌ Over-validating simple forms

❌ Ignoring mobile usability

Summary

Bootstrap validation enhances UX + data quality

                

Custom controls provide professional UI

JavaScript enables feedback

Accessibility and consistency are key goals

Important Of Digital

 

Assignment: Dropdowns & Menus (Bootstrap)

 Assignment: Dropdowns & Menus (Bootstrap)

Task 1: Dropdown Inside a Navbar

Create a responsive navigation bar.

Add a dropdown menu inside the navbar.

The navbar should collapse into a hamburger menu on smaller screens.

The dropdown should work correctly in both desktop and mobile views.

Expected Outcome:

A fully responsive navbar with a working dropdown.

Task 2: Custom Styling

Change the default appearance of the dropdown menu using CSS:

              

Background color

Text color

Hover effect

Ensure the dropdown remains readable and visually balanced.

Expected Outcome:

A customized dropdown menu that still follows good.

Task 3: Dropdown Alignment & Direction

Create:

One right-aligned dropdown

One dropup

Demonstrate how dropdown direction affects user experience.

Expected Outcome:

Properly aligned dropdowns using Bootstrap classes.

Task 4: Accessibility & Usability

Ensure proper use of:

aria-expanded

aria-labelledby

Make sure the dropdown is keyboard accessible.

Add accessibility is important in menus.

______________________________________________

Submission 👩‍🏫

Submit:

HTML file

CSS file (if used)

Include screenshots of:

Desktop view

Mobile view

Add a short explanation (100–150 words) describing:

Challenges faced

What you learned from this assignment

Evaluation Criteria

Criteria

Marks

Correct use of Bootstrap dropdowns

30

Responsiveness

20

Custom styling

20

Accessibility implementation

20

Code structure & clarity

10

Total

100

Complete This Assignment And Submit To Me 

Learn About Affiliate Marketing On Meesho 👩‍🏫👩‍🎓👏

 

Bootstrap Module 33 Partical View

 

#Online Courses

 Bootstrap Module 33

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

Enjoy Pari Version 🧚‍♀

 

Bootstrap Module 33

  #Online Courses

 Bootstrap Module 33

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 33

  Module 33 : Dropdowns & Menus. 

1. Dropdowns and menus are core UI components used to display a list of actions, navigation links, or contextual options in a compact and user  way. In Bootstrap, dropdowns are built using a combination of HTML structure, CSS utility classes, and JavaScript behaviors.

2. Understand how dropdowns and menus work internally

Create basic and advanced dropdown menus

Customize dropdown behavior and styling

Implement accessibility- dropdowns

Debug common dropdown issues

Apply dropdowns in UI scenarios

3. Conceptual Foundation 

3.1 What is a Dropdown?

A dropdown is a toggle-based UI component that shows or hides a list of menu items when triggered by a user action (click, hover, or keyboard event).

Why dropdowns exist:

Reduce UI clutter

related actions

Improve navigation efficiency

3.2 How Bootstrap Dropdowns Work 

Bootstrap dropdowns rely on three layers:

HTML Structure – Defines the menu and trigger

CSS Classes – Controls layout, visibility, and animations

JavaScript (Popper.js) – Handles positioning and toggling logic

When a user clicks a dropdown button:

Bootstrap JS listens for the event

Toggles .show class

Popper.js calculates placement

Menu becomes visible

4. Basic Dropdown 

4.1 Required Structure

<div class="dropdown">

 <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">

   Select Option

 </button>

 <ul class="dropdown-menu">

   <li><a class="dropdown-item" href="#">Action</a></li>

   <li><a class="dropdown-item" href="#">Another action</a></li>

   <li><a class="dropdown-item" href="#">Something else</a></li>

 </ul>

</div>

4.2 Explanation

.dropdown → Container

.dropdown-toggle → Trigger element

data-bs-toggle="dropdown" → Activates JS behavior

.dropdown-menu → Hidden menu

.dropdown-item → Individual menu options

Tip: Always ensure Bootstrap JS is loaded; otherwise, dropdowns will not function.

5. Dropdown 

5.1 Dropdown Divider & Header

<ul class="dropdown-menu">

 <li><h6 class="dropdown-header">Profile</h6></li>

 <li><a class="dropdown-item" href="#">Settings</a></li>

 <li><hr class="dropdown-divider"></li>

 <li><a class="dropdown-item" href="#">Logout</a></li>

</ul>

Explanation:

.dropdown-header → Non-clickable label

.dropdown-divider → Visual separation

5.2 Alignment Control

<ul class="dropdown-menu dropdown-menu-end">

Used for right-aligned menus (common in navbar profiles).

5.3 Drop Directions

<div class="dropup">...</div>

<div class="dropend">...</div>

<div class="dropstart">...</div>

Use Case: Helpful in constrained layouts like footers or sidebars.

6. Dropdowns in Navigation Menus

Example: Navbar Dropdown

<li class="nav-item dropdown">

 <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>

 <ul class="dropdown-menu">

   <li><a class="dropdown-item" href="#">Web Design</a></li>

   <li><a class="dropdown-item" href="#">SEO</a></li>

 </ul>

</li>

Application: Used in websites like e-commerce, dashboards, and admin panels.

7. Accessibility 

7.1 ARIA Roles 

Bootstrap adds:

aria-expanded

aria-haspopup

7.2 Keyboard Support

Tab → Navigate

Enter / Space → Open

Esc → Close

Insight: Avoid removing default roles; it can break accessibility compliance (WCAG).

8. Custom Styling & Behavior

8.1 Custom Colors

.dropdown-menu {

 background-color: #1e1e2f;

}

.dropdown-item {

 color: #fff;

}

.dropdown-item:hover {

 background-color: #343a40;

}

8.2 JavaScript Control

<script>

var dropdown = new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'))

dropdown.show()

</script>

9. Exercises

Exercise 1 

Create a dropdown with:

3 items

One divider

Custom button color

Exercise 2 

Create a navbar dropdown aligned to the right with profile options.

Exercise 3 

Create a dropdown controlled only via JavaScript (no data attributes).

10. Dynamic Dropdown Menu

Objective: Create a dropdown that loads menu items dynamically.

Steps:

Create empty .dropdown-menu

Use JavaScript array for items

Populate menu dynamically

<script>

const items = ['Dashboard', 'Orders', 'Settings'];

const menu = document.querySelector('.dropdown-menu');

items.forEach(item => {

 let li = document.createElement('li');

 li.innerHTML = `<a class="dropdown-item" href="#">${item}</a>`;

 menu.appendChild(li);

});

</script>

Explanation:

Demonstrates DOM manipulation

Useful for dashboards and admin panels

11. Research

UI/UX Research Insights

Dropdowns reduce cognitive load when used correctly

Avoid more than 7 items (Hick's Law)

Frequently used actions should not be hidden

12. Common Mistakes & Debugging

Problem

Cause

Solution

Dropdown not opening

JS not loaded

Include bootstrap.bundle.js

Wrong position

Parent overflow hidden

Remove overflow or use body

Not accessible

Custom JS overrides

Follow Bootstrap defaults

13.Recommendations

Use dropdowns sparingly

Prefer buttons for critical actions

Always test keyboard navigation

Optimize for mobile tap targets

14. Summary

Dropdowns and menus are powerful UI components when implemented with:

Correct structure

Accessibility in mind

UX principles

Foodie Web Stories

 

Assignment Bootstrap Module 32

 Forms – Basics (Inputs, Labels) Assignment.

 Create a simple HTML form with various input types and labels.

    

Task:

1. Create a new HTML file and include Bootstrap CSS.

2. Design a form with the following fields:

    - Text input: Name

    - Email input: Email

    - Password input: Password

    - Checkbox: Subscribe to newsletter

    - Radio buttons: Favorite color (Red, Blue, Green)

    - Select dropdown: Country

    - Textarea: Message

3. Use labels for each input field.

4. Style the form using Bootstrap's form classes.

Requirements:

- Use HTML5 and Bootstrap 5.x

    

- Make sure the form is responsive

- Use proper accessibility attributes (e.g., `for` attribute on labels)

Deliverables:

- HTML file with the working form

- Screenshot of the output

Evaluation:

- Correct implementation of form elements

- Proper use of labels and accessibility attributes

- Responsiveness and design

Tips:

 Use Bootstrap's form documentation for reference: 

Submission:

Submit your HTML file and screenshot to [insert link/email]

 

Complete This Assignment Module 32 Then Send Me