Unit 7: Bootstrap Components - Navigation & Forms

7.1 Navigation Components

Navbar:

.navbar - Navigation component
.navbar-expand-lg - Responsive toggle at different breakpoints
.navbar-brand - Logo/brand name
.navbar-nav - Navigation items
.nav-link, .nav-item - Individual links
Navbar dropdowns with .dropdown-menu
Collapsible navbar for mobile (navbar-toggler)

Sidebar & Offcanvas:

.offcanvas - Sidebar that slides in/out
.offcanvas-start, .offcanvas-end (left or right)
data-bs-toggle="offcanvas"
.offcanvas-header, .offcanvas-body

Other Components:

Carousel: Slideshow with .carousel, .carousel-item, .carousel-inner
Modal: Pop-up dialogs with .modal, .modal-dialog, .modal-content
Scrollspy: Auto-active links based on scroll position

7.2 Forms & Pagination

Form Components:

.form-control - Styled input fields
.form-label - Labels for form fields
.form-check, .form-check-input - Checkboxes and radio buttons
.form-select - Dropdown selects
.form-floating - Floating labels (label appears as placeholder)
.invalid-feedback, .valid-feedback - Validation messages
Bootstrap-5 form validation classes

Form Validation:

Client-side validation using JS and Bootstrap classes
.is-valid, .is-invalid classes
HTML5 constraints: required, minlength, pattern, etc.

Pagination:

.pagination - Pagination component
.page-item, .page-link - Individual page links
.active - Mark current page
.disabled - Disable pagination links

Practice Problems (Practical 17-18)

Practical 17: Design a Bootstrap 5 form with validation. Include fields for username, email, password. Show validation feedback on submit.

Practical 18: Create a Bootstrap 5 slideshow/carousel with 3 random images, navigation buttons, and captions. Include next/previous buttons.

Q1: Explain Bootstrap Navbar structure and how to make it responsive.

Q2: How do you create a collapsible navbar for mobile devices?

Q3: What is Offcanvas in Bootstrap? How is it different from a modal?

Q4: How do you add validation to Bootstrap forms?

Q5: Explain floating labels in Bootstrap forms and their advantages.

Q6: How do you create a dropdown menu inside a navbar?

Q7: Create a responsive carousel with multiple images and auto-rotation.

Q8: How do you trigger a Bootstrap modal using JavaScript?

✨ Created by DRThummar ✨

💻 Comprehensive FSD Practical Exam Preparation Material

📅 Updated: 2026 | 📚 Course Code: 117013392

🔗 GitHub Repository