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
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:
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
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
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
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
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
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]
