software-development-company-logo

Author: admin

  • Lesson 25: Bootstrap with React (Bootstrap vs Material UI)

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to integrate Bootstrap with React.js, compare it with Material UI, and decide which framework best suits your project.

    🔹 1. Introduction to Bootstrap in React

    Bootstrap is a popular CSS framework used for building responsive UIs in React applications.

    💡 Why Use Bootstrap with React?
    ✔️ Easy to integrate – Works with or without third-party libraries.
    ✔️ Prebuilt UI components – Saves development time.
    ✔️ Fully responsive – Works on all screen sizes.

    🔹 2. Installing Bootstrap in a React Project

    To use Bootstrap in React, install it via npm or use a CDN.

    1️⃣ Method 1: Using Bootstrap via npm

    ✅ Run the following command:

    sh
    npm install bootstrap

    🔹 What happens?

    • This installs Bootstrap locally in your React project.

    ✅ Import Bootstrap in src/index.js or src/App.js:

    javascript
    import 'bootstrap/dist/css/bootstrap.min.css';

    🔹 What happens?

    • This loads Bootstrap styles into your React application.

    2️⃣ Method 2: Using Bootstrap via CDN

    ✅ Add Bootstrap’s CDN in public/index.html:

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

    🔹 What happens?

    • Bootstrap loads globally, but won’t be part of your package dependencies.

    🔹 3. Using Bootstrap Components in React

    You can use Bootstrap classes just like in normal HTML.

    ✅ Example: Bootstrap Button in React

    javascript
    import React from "react";

    function App() {
    return (
    <div className="container mt-5">
    <button className="btn btn-primary">Click Me</button>
    </div>
    );
    }

    export default App;

    🔹 What happens?

    • The button uses Bootstrap’s primary button style.

    🔹 4. Using react-bootstrap for Better Component Support

    react-bootstrap provides Bootstrap components as React components.

    1️⃣ Installing react-bootstrap

    ✅ Run the following command:

    sh
    npm install react-bootstrap bootstrap

    🔹 What happens?

    • This installs Bootstrap and its React-specific components.

    2️⃣ Using Bootstrap Components in React

    ✅ Example: Bootstrap Button Component

    javascript
    import React from "react";
    import { Button } from "react-bootstrap";
    import "bootstrap/dist/css/bootstrap.min.css";

    function App() {
    return (
    <div className="container mt-5">
    <Button variant="primary">Click Me</Button>
    </div>
    );
    }

    export default App;

    🔹 What happens?

    • Instead of using <button class="btn btn-primary">, we use <Button variant="primary">.

    🔹 5. Bootstrap vs Material UI in React

    Both Bootstrap and Material UI (MUI) are popular UI frameworks for React.

    Feature Bootstrap Material UI (MUI)
    Design Language Traditional Modern, Google Material Design
    Customization Uses SCSS variables Uses Theme Provider
    Components Prebuilt components Advanced, customizable components
    Integration Requires Bootstrap or react-bootstrap Uses @mui/material library
    Flexibility Can work with any design system Strictly follows Material Design

    🔹 6. Installing & Using Material UI in React

    ✅ Run the following command:

    sh
    npm install @mui/material @emotion/react @emotion/styled

    🔹 What happens?

    • This installs Material UI components for React.

    ✅ Example: Material UI Button

    javascript
    import React from "react";
    import { Button } from "@mui/material";

    function App() {
    return (
    <div className="container mt-5">
    <Button variant="contained" color="primary">Click Me</Button>
    </div>
    );
    }

    export default App;

    🔹 What happens?

    • The button follows Material UI design principles.

    🔹 7. When to Use Bootstrap vs Material UI?

    ✅ Use Bootstrap if:

    • You need fast development and a traditional UI.
    • Your app is lightweight and performance-focused.
    • You want more flexibility in design.

    ✅ Use Material UI if:

    • You want a modern, app-like UI.
    • You need prebuilt themes and consistent styling.
    • Your project follows Material Design principles.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap & Material UI in React.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What is the easiest way to add Bootstrap to a React project?
    a) npm install bootstrap
    b) react-bootstrap install
    c) bootstrap-react-cli
    d) npm start bootstrap

    ✅ Correct Answer: a) npm install bootstrap

    2️⃣ What command installs Material UI?
    a) npm install material-ui
    b) npm install @mui/material
    c) npm install react-mui
    d) npm install material-design

    ✅ Correct Answer: b) npm install @mui/material

    📌 True or False

    3️⃣ Bootstrap requires JavaScript to work with React.
    ✅ Answer: False

    4️⃣ Material UI provides a better modern UI than Bootstrap.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Install Bootstrap and create a React component with a Bootstrap button.
    ✅ Install react-bootstrap and use Bootstrap’s Button component.
    ✅ Install Material UI and create a modern-looking form using MUI components.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap can be used in React via npm or CDN.
    ✅ react-bootstrap provides React components for Bootstrap UI.
    ✅ Material UI offers a modern, Google-style UI for React.
    ✅ Bootstrap is flexible, while Material UI follows a strict design system.

  • Lesson 24: Creating Interactive Sliders & Carousels in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to create interactive sliders and carousels using Bootstrap’s built-in Carousel component.

    🔹 1. Introduction to Bootstrap Carousels & Sliders

    A carousel (slider) is used to display multiple images, text, or content slides in a rotating fashion.

    💡 Why Use Bootstrap Carousels?
    ✔️ Pre-built structure – No extra JavaScript needed.
    ✔️ Responsive and touch-friendly – Works on all devices.
    ✔️ Supports images, text, and even videos.

    🔹 2. Basic Bootstrap Carousel

    A basic carousel contains:
    1️⃣ .carousel – The container
    2️⃣ .carousel-inner – Holds slides
    3️⃣ .carousel-item – Individual slides
    4️⃣ Controls & indicators for navigation

    ✅ Example: Simple Image Carousel

    html
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
    </div>
    </div>

    <!-- Navigation Buttons -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • The carousel cycles through images automatically.
    • Left & right navigation buttons allow manual control.

    🔹 3. Adding Indicators & Captions

    Indicators allow users to jump between slides, while captions provide slide descriptions.

    ✅ Example: Carousel with Indicators & Captions

    html
    <div id="carouselWithCaptions" class="carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="2"></button>
    </div>

    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    <div class="carousel-caption">
    <h5>First Slide</h5>
    <p>Example caption for the first slide.</p>
    </div>
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    <div class="carousel-caption">
    <h5>Second Slide</h5>
    <p>Example caption for the second slide.</p>
    </div>
    </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselWithCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • Indicators allow users to navigate between slides.
    • Each slide has a caption with a title and description.

    🔹 4. Controlling Carousel Speed & Autoplay

    You can customize speed and autoplay behavior using data-bs-interval.

    ✅ Example: Slower Auto-Scrolling Carousel

    html
    <div id="slowCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slow Slide">
    </div>
    <div class="carousel-item" data-bs-interval="7000">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slow Slide 2">
    </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#slowCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#slowCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • Each slide remains visible for a longer time before transitioning.

    🔹 5. Creating a Manual (Non-Auto) Carousel

    ✅ Example: Disabling Auto Sliding

    html
    <div id="manualCarousel" class="carousel slide">
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Manual Slide 1">
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Manual Slide 2">
    </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#manualCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#manualCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • The carousel only moves when users click next or previous buttons.

    🔹 6. Controlling Carousel with JavaScript

    ✅ Example: JavaScript-Powered Carousel Control

    html
    <button id="startCarousel" class="btn btn-success">Start</button>
    <button id="stopCarousel" class="btn btn-danger">Stop</button>

    <div id="controlledCarousel" class="carousel slide" data-bs-ride="false">
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    </div>
    </div>
    </div>

    <script>
    const myCarousel = new bootstrap.Carousel(document.getElementById('controlledCarousel'));
    document.getElementById('startCarousel').addEventListener('click', () => myCarousel.cycle());
    document.getElementById('stopCarousel').addEventListener('click', () => myCarousel.pause());
    </script>

    🔹 What happens?

    • Clicking “Start” resumes autoplay, and “Stop” pauses the slider.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Carousels.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ Which class is used to create a Bootstrap carousel?
    a) .slider-bootstrap
    b) .carousel
    c) .bs-slider
    d) .slideshow

    ✅ Correct Answer: b) .carousel

    2️⃣ How do you disable auto-sliding in a Bootstrap carousel?
    a) data-bs-autoplay="false"
    b) data-bs-slide="none"
    c) data-bs-ride="false"
    d) data-bs-stop="true"

    ✅ Correct Answer: c) data-bs-ride="false"

    🎯 Practical Challenge

    ✅ Create a Bootstrap carousel with three images and captions.
    ✅ Customize the interval speed of each slide.
    ✅ Add buttons to start and stop the carousel using JavaScript.
    ✅ Post your solution in the discussion forum for feedback!

  • Lesson 23: Using Bootstrap’s JavaScript Plugins

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to use Bootstrap’s built-in JavaScript plugins to add interactive functionality to your website.

    🔹 1. Introduction to Bootstrap JavaScript Plugins

    Bootstrap comes with powerful JavaScript plugins that enhance UI elements without requiring additional third-party libraries.

    💡 Why Use Bootstrap JavaScript Plugins?
    ✔️ Lightweight & Fast – No extra dependencies required.
    ✔️ Pre-built UI interactions – Modals, dropdowns, carousels, tooltips, etc.
    ✔️ Works with data attributes – No need to write custom JavaScript.

    🔹 2. How to Use Bootstrap’s JavaScript Plugins

    Bootstrap plugins can be used in two ways:
    1️⃣ Using Data Attributes (No JavaScript required)
    2️⃣ Using JavaScript API (More control and flexibility)

    🔹 3. Bootstrap Modal Plugin

    The Modal plugin creates popup dialogs for forms, alerts, and messages.

    1️⃣ Using a Modal with Data Attributes

    ✅ Example: Basic Modal

    html
    <!-- Button to Open Modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">My Modal</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
    This is a Bootstrap modal.
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • Clicking the button opens a popup modal.

    2️⃣ Controlling Modal with JavaScript

    ✅ Example: Opening & Closing a Modal Using JavaScript

    html
    <button id="openModal" class="btn btn-success">Open Modal</button>

    <div class="modal fade" id="jsModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">JavaScript Modal</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
    This modal is controlled with JavaScript.
    </div>
    </div>
    </div>
    </div>

    <script>
    const myModal = new bootstrap.Modal(document.getElementById('jsModal'));
    document.getElementById('openModal').addEventListener('click', function () {
    myModal.show();
    });
    </script>

    🔹 What happens?

    • Clicking “Open Modal” triggers the modal via JavaScript.

    🔹 4. Bootstrap Tooltip Plugin

    The Tooltip plugin adds hover-based text popups.

    1️⃣ Adding Tooltips with Data Attributes

    ✅ Example: Tooltip on a Button

    html
    <button class="btn btn-info" data-bs-toggle="tooltip" title="This is a tooltip">
    Hover Me
    </button>

    <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    </script>

    🔹 What happens?

    • Hovering over the button displays a tooltip.

    🔹 5. Bootstrap Popover Plugin

    The Popover plugin adds clickable tooltips with extra content.

    1️⃣ Popover Using Data Attributes

    ✅ Example: Clickable Popover

    html
    <button type="button" class="btn btn-warning" data-bs-toggle="popover" title="Popover Title" data-bs-content="This is a popover">
    Click Me
    </button>

    <script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
    });
    </script>

    🔹 What happens?

    • Clicking the button displays a popover with extra information.

    🔹 6. Bootstrap Toast Plugin

    The Toast plugin is used for lightweight notifications.

    1️⃣ Creating a Toast Notification

    ✅ Example: Basic Toast Notification

    html
    <!-- Toast Container -->
    <div class="toast show position-fixed bottom-0 end-0 p-3" role="alert">
    <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
    This is a Bootstrap toast notification!
    </div>
    </div>

    🔹 What happens?

    • A notification appears in the bottom right corner.

    🔹 7. Bootstrap Collapse Plugin

    The Collapse plugin toggles the visibility of content.

    1️⃣ Collapsible Content

    ✅ Example: Click to Show/Hide

    html
    <button class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle Content
    </button>

    <div id="collapseExample" class="collapse">
    <div class="card card-body">
    This is hidden content that appears when clicked.
    </div>
    </div>

    🔹 What happens?

    • Clicking the button shows or hides the content.

    🔹 8. Bootstrap Carousel Plugin

    The Carousel plugin creates image sliders.

    1️⃣ Creating an Image Slider

    ✅ Example: Image Carousel

    html
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
    <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
    </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • The carousel automatically cycles through images.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap JavaScript Plugins.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ Which attribute is used to open a Bootstrap modal?
    a) data-bs-modal="open"
    b) data-bs-target="modal"
    c) data-bs-toggle="modal"
    d) data-bs-popup="true"

    ✅ Correct Answer: c) data-bs-toggle="modal"

    2️⃣ What plugin displays hover-based text popups?
    a) Toast
    b) Tooltip
    c) Collapse
    d) Dropdown

    ✅ Correct Answer: b) Tooltip

    📌 True or False

    3️⃣ Bootstrap modals require JavaScript to function.
    ✅ Answer: True

    4️⃣ The Carousel plugin can be controlled with JavaScript.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Add a Bootstrap tooltip to a button.
    ✅ Create a popover that appears when clicked.
    ✅ Build a toast notification that appears on page load.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap JavaScript plugins add modals, tooltips, popovers, carousels, and more.
    ✅ Data attributes (data-bs-toggle) enable plugins without JavaScript.
    ✅ Bootstrap’s JavaScript API (new bootstrap.Modal()) provides more control.

  • Lesson 22: Form Validation & Error Handling

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to implement form validation and handle errors using Bootstrap’s built-in validation system and JavaScript.

    🔹 1. Introduction to Form Validation & Error Handling

    Form validation ensures that users enter valid data before submission.

    💡 Why Use Form Validation?
    ✔️ Prevents incorrect data submission.
    ✔️ Enhances user experience with instant feedback.
    ✔️ Bootstrap provides built-in styles for validation.

    🔹 2. Bootstrap’s Built-in Form Validation

    Bootstrap uses CSS classes to indicate form validation states.

    ✅ Example: Basic Validation with .is-invalid & .is-valid

    html
    <form>
    <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control is-invalid" placeholder="Enter your email">
    <div class="invalid-feedback">Please enter a valid email.</div>
    </div>

    <div class="mb-3">
    <label class="form-label">Username</label>
    <input type="text" class="form-control is-valid" placeholder="Valid username">
    <div class="valid-feedback">Looks good!</div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    🔹 What happens?

    • Red input field (is-invalid) appears for incorrect input.
    • Green input field (is-valid) appears for correct input.

    🔹 3. Adding JavaScript-Powered Validation

    Bootstrap’s validation system works with JavaScript.

    ✅ Example: JavaScript-Powered Validation

    html
    <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.</div>
    </div>

    <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" required>
    <div class="invalid-feedback">Password is required.</div>
    </div>

    <button type="submit" class="btn btn-success">Submit</button>
    </form>

    <script>
    document.querySelector("form").addEventListener("submit", function(event) {
    if (!this.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
    }
    this.classList.add("was-validated");
    });
    </script>

    🔹 What happens?

    • Invalid fields show an error message (invalid-feedback).
    • If fields are valid, the form submits.

    🔹 4. Customizing Error Messages

    You can customize validation messages for better UX.

    ✅ Example: Custom Validation Messages

    html
    <form class="needs-validation" novalidate>
    <div class="mb-3">
    <label class="form-label">Username</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">Username cannot be empty!</div>
    </div>

    <button type="submit" class="btn btn-danger">Submit</button>
    </form>

    <script>
    document.querySelector("form").addEventListener("submit", function(event) {
    let username = document.getElementById("username");
    if (username.value.trim() === "") {
    username.classList.add("is-invalid");
    event.preventDefault();
    } else {
    username.classList.remove("is-invalid");
    }
    });
    </script>

    🔹 What happens?

    • The error message appears if the username field is empty.

    🔹 5. Adding Regex Pattern Validation

    Use regex patterns to enforce specific input formats.

    ✅ Example: Phone Number Validation

    html
    <form>
    <div class="mb-3">
    <label class="form-label">Phone Number</label>
    <input type="tel" class="form-control" id="phone" pattern="[0-9]{10}" required>
    <div class="invalid-feedback">Please enter a 10-digit phone number.</div>
    </div>

    <button type="submit" class="btn btn-info">Submit</button>
    </form>

    🔹 What happens?

    • Only 10-digit numbers are accepted.

    🔹 6. Displaying Real-Time Validation Messages

    ✅ Example: Live Validation Feedback

    html
    <form>
    <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" id="liveEmail" required>
    <div class="invalid-feedback">Invalid email format.</div>
    </div>
    </form>

    <script>
    document.getElementById("liveEmail").addEventListener("input", function () {
    if (this.checkValidity()) {
    this.classList.remove("is-invalid");
    this.classList.add("is-valid");
    } else {
    this.classList.remove("is-valid");
    this.classList.add("is-invalid");
    }
    });
    </script>

    🔹 What happens?

    • The input turns green (is-valid) when correct and red (is-invalid) when incorrect.

    🔹 7. Adding Password Strength Validation

    Password validation ensures secure passwords.

    ✅ Example: Password Strength Indicator

    html
    <form>
    <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" id="password" required>
    <small id="passwordHelp" class="form-text">Must be 8+ characters, include numbers & symbols.</small>
    <div class="invalid-feedback">Weak password.</div>
    </div>
    </form>

    <script>
    document.getElementById("password").addEventListener("input", function () {
    let password = this.value;
    let regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

    if (regex.test(password)) {
    this.classList.add("is-valid");
    this.classList.remove("is-invalid");
    } else {
    this.classList.add("is-invalid");
    this.classList.remove("is-valid");
    }
    });
    </script>

    🔹 What happens?

    • Green input when password meets criteria.
    • Red input when password is weak.

    🔹 8. Handling Server-Side Validation Errors

    Sometimes validation errors come from the backend.

    ✅ Example: Displaying Server Errors

    html
    <form>
    <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control is-invalid">
    <div class="invalid-feedback">This email is already taken.</div>
    </div>
    </form>

    🔹 What happens?

    • Server response triggers an error message.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Form Validation.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class highlights invalid fields in Bootstrap?
    a) .error-input
    b) .invalid
    c) .is-invalid
    d) .form-error

    ✅ Correct Answer: c) .is-invalid

    2️⃣ What Bootstrap class enables real-time validation?
    a) .form-live
    b) .needs-validation
    c) .input-validation
    d) .validate-now

    ✅ Correct Answer: b) .needs-validation

    📌 True or False

    3️⃣ Bootstrap validation works without JavaScript.
    ✅ Answer: False

    4️⃣ Password strength validation can be done using Regex.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Implement live email validation using .is-invalid and .is-valid.
    ✅ Create a signup form with password strength validation.
    ✅ Display server-side validation errors for a taken email.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap validation (is-invalid, is-valid) highlights form errors.
    ✅ JavaScript validation (checkValidity()) prevents incorrect submissions.
    ✅ Regex patterns (pattern="...") enforce correct input formats.
    ✅ Server-side validation errors can be displayed with .invalid-feedback.

  • Lesson 20: Customizing Bootstrap Variables with SCSS

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to customize Bootstrap styles using SCSS variables and build a custom Bootstrap theme.

    🔹 1. Introduction to Bootstrap SCSS Customization

    Bootstrap is built using SCSS (Sassy CSS), which allows customization of colors, typography, spacing, and other styles.

    💡 Why Use SCSS for Bootstrap Customization?
    ✔️ Modify Bootstrap colors, fonts, and layout without overriding CSS.
    ✔️ Improve performance by compiling only the necessary Bootstrap components.
    ✔️ Make your theme unique while using Bootstrap’s framework.

    🔹 2. Setting Up Bootstrap SCSS

    To customize Bootstrap, follow these steps:

    1️⃣ Install Bootstrap with npm

    ✅ Run the following command:

    sh
    npm install bootstrap

    🔹 What happens?

    • This installs Bootstrap and its SCSS files in node_modules/bootstrap/.

    2️⃣ Create a SCSS File for Customization

    Inside your project, create a custom SCSS file (e.g., custom.scss).

    ✅ Example: Import Bootstrap in SCSS

    scss
    // Import Bootstrap functions and variables
    @import "node_modules/bootstrap/scss/functions";
    @import "node_modules/bootstrap/scss/variables";    // Override Bootstrap variables
    $primary: #ff6600; // Custom primary color
    $secondary: #333333; // Custom secondary color
    $body-font-family: ‘Poppins’, sans-serif; // Custom font

    // Import Bootstrap SCSS (after overriding variables)
    @import “node_modules/bootstrap/scss/bootstrap”;

    🔹 What happens?

    • Bootstrap variables are modified before importing Bootstrap styles.

    🔹 3. Customizing Bootstrap Colors

    Bootstrap uses SCSS variables to define colors.

    ✅ Example: Changing Bootstrap Colors

    scss
    $primary: #ff6600;
    $success: #28a745;
    $danger: #dc3545;
    $warning: #ffc107;
    $info: #17a2b8;    // Import Bootstrap with new colors
    @import “node_modules/bootstrap/scss/bootstrap”;

    🔹 What happens?

    • The primary color changes from blue to orange (#ff6600).

    🔹 4. Customizing Bootstrap Typography

    Modify Bootstrap’s default font family, sizes, and weights.

    ✅ Example: Custom Font & Typography

    scss
    $font-family-sans-serif: 'Poppins', sans-serif;
    $font-size-base: 1rem; // Default font size
    $h1-font-size: 2.5rem; // Custom H1 size    // Import Bootstrap with updated typography
    @import “node_modules/bootstrap/scss/bootstrap”;

    🔹 What happens?

    • The default font changes to Poppins.
    • H1 headers become larger.

    🔹 5. Customizing Bootstrap Buttons

    Bootstrap buttons are styled using SCSS variables.

    ✅ Example: Custom Button Styles

    scss
    $btn-padding-y: 0.75rem;
    $btn-padding-x: 1.5rem;
    $btn-border-radius: 10px;    // Import Bootstrap with new button styles
    @import “node_modules/bootstrap/scss/bootstrap”;

    🔹 What happens?

    • Buttons become larger and rounded.

    🔹 6. Creating a Custom Theme

    You can define a completely custom theme using SCSS.

    ✅ Example: Custom Theme

    scss
    $primary: #6f42c1; // Purple theme
    $secondary: #f8f9fa;
    $body-bg: #f4f4f4;
    $body-color: #333;    // Custom button styles
    $btn-border-radius: 30px;
    $btn-font-weight: bold;

    // Import Bootstrap with custom theme
    @import “node_modules/bootstrap/scss/bootstrap”;

    🔹 What happens?

    • The entire site follows a custom theme with purple primary color.

    🔹 7. Compiling SCSS to CSS

    To apply your SCSS changes, compile SCSS into CSS.

    ✅ Example: Compile SCSS to CSS

    sh
    sass custom.scss custom.css

    🔹 What happens?

    • The SCSS file compiles into a CSS file (custom.css).

    🔹 8. Using Compiled CSS in HTML

    Once compiled, link the custom CSS in your HTML file.

    ✅ Example: Using Custom Bootstrap Styles

    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="custom.css">
    </head>
    <body>
    <button class="btn btn-primary">Custom Button</button>
    </body>
    </html>

    🔹 What happens?

    • Bootstrap now uses your customized styles.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap SCSS Customization.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What command installs Bootstrap with SCSS?
    a) npm install bootstrap
    b) bootstrap install
    c) sass install bootstrap
    d) bootstrap-cli install

    ✅ Correct Answer: a) npm install bootstrap

    2️⃣ Where should you override Bootstrap variables?
    a) After importing Bootstrap
    b) Before importing Bootstrap
    c) Inside HTML
    d) In JavaScript

    ✅ Correct Answer: b) Before importing Bootstrap

    📌 True or False

    3️⃣ Bootstrap’s SCSS variables can be customized without JavaScript.
    ✅ Answer: True

    4️⃣ You must recompile SCSS whenever you change Bootstrap variables.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Modify Bootstrap’s primary color to #ff5722.
    ✅ Customize Bootstrap buttons to have rounded corners and a larger size.
    ✅ Set Bootstrap’s default font to “Roboto”.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap SCSS customization allows deep style modifications.
    ✅ Variables ($primary, $font-family-sans-serif) control Bootstrap styles.
    ✅ SCSS must be compiled into CSS using sass or a build tool.
    ✅ Customizing Bootstrap SCSS makes your theme unique.

  • Lesson 19: Bootstrap Animations & Transitions

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to use Bootstrap’s built-in animations, transitions, and CSS utilities to create smooth effects in UI elements.

    🔹 1. Introduction to Bootstrap Animations & Transitions

    Bootstrap provides CSS-based animations and transitions to enhance user experience without requiring JavaScript.

    💡 Why Use Bootstrap Animations & Transitions?
    ✔️ Smooth UI experience – Enhances visibility of elements.
    ✔️ No extra JavaScript needed – Uses pure CSS for effects.
    ✔️ Lightweight and fast – Optimized for performance.

    🔹 2. Bootstrap CSS Transitions

    Transitions allow smooth changes between two states (e.g., hover effects).

    ✅ Example: Button with Smooth Hover Effect

    html
    <style>
    .btn-hover-effect {
    transition: all 0.3s ease-in-out;
    }
    .btn-hover-effect:hover {
    background-color: darkblue;
    color: white;
    transform: scale(1.1);
    }
    </style>

    <button class="btn btn-primary btn-hover-effect">Hover Me</button>

    🔹 What happens?

    • When hovering over the button, it changes color and grows slightly.

    🔹 3. Bootstrap Fade & Slide Animations

    Bootstrap includes built-in classes for fading and sliding effects.

    1️⃣ Fading In & Out

    ✅ Example: Fade-In Effect

    html
    <button class="btn btn-success" onclick="document.getElementById('fadeBox').classList.toggle('show');">
    Toggle Fade
    </button>

    <div id="fadeBox" class="alert alert-warning fade">
    This box will fade in and out.
    </div>

    🔹 What happens?

    • Clicking the button fades the box in and out.

    2️⃣ Sliding Elements

    ✅ Example: Slide Down Animation

    html
    <style>
    .slide-down {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    }
    .slide-down.show {
    max-height: 200px;
    }
    </style>

    <button class="btn btn-info" onclick="document.getElementById('slideBox').classList.toggle('show');">
    Toggle Slide
    </button>

    <div id="slideBox" class="alert alert-primary slide-down">
    This box will slide down.
    </div>

    🔹 What happens?

    • Clicking the button slides the box down smoothly.

    🔹 4. Bootstrap Spinner Animations

    Bootstrap provides prebuilt loading spinners.

    ✅ Example: Basic Loading Spinner

    html
    <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
    </div>

    🔹 What happens?

    • A spinning loader appears to indicate loading.

    1️⃣ Growing Spinner

    ✅ Example: Growing Spinner

    html
    <div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
    </div>

    🔹 What happens?

    • The spinner grows and shrinks continuously.

    🔹 5. Bootstrap Animate-On-Scroll

    You can use Bootstrap’s visibility utilities to trigger animations on scroll.

    ✅ Example: Fade-In on Scroll

    html
    <style>
    .fade-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .fade-scroll.visible {
    opacity: 1;
    transform: translateY(0);
    }
    </style>

    <div class="container">
    <div id="scrollBox" class="alert alert-success fade-scroll">
    This box will appear when you scroll.
    </div>
    </div>

    <script>
    document.addEventListener("scroll", function () {
    let element = document.getElementById("scrollBox");
    let position = element.getBoundingClientRect().top;
    let screenHeight = window.innerHeight;
    if (position < screenHeight) {
    element.classList.add("visible");
    }
    });
    </script>

    🔹 What happens?

    • The box fades in when scrolling.

    🔹 6. Bootstrap Animated Modals

    ✅ Example: Modal with Slide Animation

    html
    <!-- Button to Open Modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#animatedModal">
    Open Animated Modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="animatedModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">Animated Modal</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
    This modal fades in and out smoothly.
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • The modal fades in and out smoothly.

    🔹 7. Bootstrap Animate Elements Using Keyframes

    ✅ Example: Custom Keyframe Animation

    html
    <style>
    @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    }
    .bouncing {
    animation: bounce 0.5s infinite;
    }
    </style>

    <button class="btn btn-warning bouncing">Bouncing Button</button>

    🔹 What happens?

    • The button bounces continuously.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Animations & Transitions.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class makes an element fade in and out?
    a) .fade
    b) .hidden
    c) .fade-animation
    d) .opacity-toggle

    ✅ Correct Answer: a) .fade

    2️⃣ What Bootstrap class creates a spinning loader?
    a) .spinner-animate
    b) .loading-icon
    c) .spinner-border
    d) .circle-spin

    ✅ Correct Answer: c) .spinner-border

    📌 True or False

    3️⃣ Bootstrap animations require JavaScript to work.
    ✅ Answer: False (Many animations use pure CSS.)

    4️⃣ You can use .modal.fade to animate modals smoothly.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a button with a hover effect that changes color and size.
    ✅ Build a slide-down alert box that appears on click.
    ✅ Add a spinner animation inside a button while loading.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap animations (.fade, .slide) create smooth UI effects.
    ✅ Spinners (.spinner-border, .spinner-grow) indicate loading states.
    ✅ CSS transitions (transition, transform) add smooth hover effects.
    ✅ Keyframes (@keyframes) create custom animations.

  • Lesson 18: Using Bootstrap Icons & SVGs

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to use Bootstrap Icons & SVGs to enhance your UI with vector graphics.

    🔹 1. Introduction to Bootstrap Icons & SVGs

    Icons and SVGs improve visual clarity and navigation. Bootstrap provides a free icon library with over 1,800+ icons.

    💡 Why Use Bootstrap Icons & SVGs?
    ✔️ Lightweight & Scalable – No pixelation on zoom.
    ✔️ Customizable with CSS – Change size, color, and effects.
    ✔️ Compatible with Bootstrap components – Works in buttons, navbars, alerts, etc.

    🔹 2. Using Bootstrap Icons

    Bootstrap Icons require a simple <i> tag with a class.

    ✅ Example: Adding a Bootstrap Icon

    html
    <i class="bi bi-house"></i> Home

    🔹 What happens?

    • The house icon appears next to the “Home” text.

    1️⃣ Using Bootstrap Icons in Buttons

    Icons inside buttons make them more interactive and visually appealing.

    ✅ Example: Button with an Icon

    html
    <button class="btn btn-primary">
    <i class="bi bi-download"></i> Download
    </button>

    🔹 What happens?

    • The download icon appears inside the button.

    2️⃣ Bootstrap Icons in Links & Navigation

    ✅ Example: Navbar with Icons

    html
    <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#"><i class="bi bi-bootstrap"></i> My Website</a>
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-person"></i> Profile</a>
    </li>
    </ul>
    </nav>

    🔹 What happens?

    • The “Home” and “Profile” links include icons for clarity.

    3️⃣ Changing Icon Size & Color

    Icons can be styled with CSS.

    ✅ Example: Custom Icon Size & Color

    html
    <i class="bi bi-heart" style="font-size: 2rem; color: red;"></i>

    🔹 What happens?

    • The heart icon is larger and red.

    4️⃣ Animated Icons

    Bootstrap supports rotating and spinning icons.

    ✅ Example: Spinning Icon

    html
    <i class="bi bi-arrow-clockwise spin"></i>

    🔹 What happens?

    • The icon rotates continuously.

    🔹 3. Using SVGs in Bootstrap

    SVGs (Scalable Vector Graphics) are resolution-independent images.

    ✅ Example: Basic SVG

    html
    <svg width="50" height="50">
    <circle cx="25" cy="25" r="20" fill="blue" />
    </svg>

    🔹 What happens?

    • A blue circle appears inside the SVG container.

    1️⃣ Customizing SVGs with Bootstrap Classes

    SVGs can be styled using Bootstrap’s utility classes.

    ✅ Example: SVG with Bootstrap Colors

    html
    <svg class="text-success" width="50" height="50" fill="currentColor">
    <rect width="50" height="50"></rect>
    </svg>

    🔹 What happens?

    • The rectangle takes Bootstrap’s “success” (green) color.

    2️⃣ Using Bootstrap Icons as Inline SVGs

    Icons can be embedded as SVGs for customization.

    ✅ Example: Inline SVG Icon

    html
    <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"/>
    </svg>

    🔹 What happens?

    • The heart icon appears as an SVG.

    3️⃣ Resizing SVGs Dynamically

    ✅ Example: Responsive SVGs

    html
    <svg class="img-fluid" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="blue"></circle>
    </svg>

    🔹 What happens?

    • The SVG resizes dynamically to fit the container.

    🔹 4. Combining Icons & SVGs in UI Components

    1️⃣ Icons in Alerts

    ✅ Example: Alert with an Icon

    html
    <div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle"></i> Warning! Something went wrong.
    </div>

    🔹 What happens?

    • The warning icon appears inside the alert box.

    2️⃣ Icons in Form Inputs

    ✅ Example: Input Field with an Icon

    html
    <div class="input-group">
    <span class="input-group-text"><i class="bi bi-person"></i></span>
    <input type="text" class="form-control" placeholder="Username">
    </div>

    🔹 What happens?

    • The user icon appears inside the input field.

    3️⃣ Icons in Dropdowns

    ✅ Example: Dropdown with Icons

    html
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    <i class="bi bi-menu-button"></i> Menu
    </button>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><i class="bi bi-house"></i> Home</a></li>
    <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> Settings</a></li>
    </ul>
    </div>

    🔹 What happens?

    • The dropdown options have icons next to them.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Icons & SVGs.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class is used to display an icon?
    a) .icon
    b) .bootstrap-icon
    c) .bi
    d) .svg-icon

    ✅ Correct Answer: c) .bi

    2️⃣ How can you change an icon’s size?
    a) font-size: 2rem;
    b) size: large;
    c) .icon-large
    d) .bi-xl

    ✅ Correct Answer: a) font-size: 2rem;

    📌 True or False

    3️⃣ Bootstrap Icons require an external font library.
    ✅ Answer: False (Bootstrap Icons are built-in.)

    4️⃣ SVGs can be resized dynamically using .img-fluid.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a button with an icon (.bi-download) inside it.
    ✅ Add icons to a navigation menu (.bi-house, .bi-person).
    ✅ Design a Bootstrap alert box with an SVG warning icon.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap Icons (.bi) provide scalable, customizable vector graphics.
    ✅ Icons can be styled using CSS (font-size, color).
    ✅ SVGs are resolution-independent and can be customized with Bootstrap classes.
    ✅ Icons work in buttons, dropdowns, alerts, forms, and navigation.

  • Lesson 17: Breadcrumbs & Pagination in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to use Bootstrap’s Breadcrumbs & Pagination components to improve navigation and user experience.

    🔹 1. Introduction to Breadcrumbs & Pagination

    Breadcrumbs and pagination help users navigate large websites efficiently.

    💡 Why Use Breadcrumbs & Pagination?
    ✔️ Breadcrumbs show the user’s current location within the site.
    ✔️ Pagination divides large content into multiple pages for better usability.

    🔹 2. Bootstrap Breadcrumbs

    Breadcrumbs display hierarchical navigation, helping users track their path on a website.

    ✅ Example: Simple Breadcrumb Navigation

    html
    <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page">Article</li>
    </ol>
    </nav>

    🔹 What happens?

    • The breadcrumb links show the navigation hierarchy.
    • The current page (“Article”) is bold and non-clickable.

    1️⃣ Breadcrumb with Icons

    ✅ Example: Breadcrumb with Icons

    html
    <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i> Home</a></li>
    <li class="breadcrumb-item"><a href="#"><i class="bi bi-folder"></i> Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page"><i class="bi bi-file-earmark-text"></i> Article</li>
    </ol>
    </nav>

    🔹 What happens?

    • Icons are added next to breadcrumb items.

    2️⃣ Styling Breadcrumbs with Backgrounds

    ✅ Example: Colored Breadcrumbs

    html
    <nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-light p-2">
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="#">Users</a></li>
    <li class="breadcrumb-item active text-primary" aria-current="page">Profile</li>
    </ol>
    </nav>

    🔹 What happens?

    • The breadcrumb has a light background (bg-light).
    • The current page is highlighted in blue (text-primary).

    🔹 3. Bootstrap Pagination

    Pagination helps users navigate large datasets by breaking them into multiple pages.

    ✅ Example: Simple Pagination

    html
    <nav aria-label="Page navigation">
    <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
    </nav>

    🔹 What happens?

    • Users navigate between multiple pages using numbered links.

    1️⃣ Pagination with Active & Disabled States

    ✅ Example: Pagination with Active Page & Disabled Button

    html
    <nav aria-label="Pagination">
    <ul class="pagination">
    <li class="page-item disabled"><a class="page-link">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
    </nav>

    🔹 What happens?

    • The “Previous” button is disabled.
    • The current page (2) is highlighted as active.

    2️⃣ Pagination with Icons

    ✅ Example: Pagination Using Icons

    html
    <nav aria-label="Pagination">
    <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a></li>
    </ul>
    </nav>

    🔹 What happens?

    • The “Previous” and “Next” buttons have arrow icons instead of text.

    3️⃣ Large & Small Pagination

    ✅ Example: Small & Large Pagination

    html
    <nav aria-label="Pagination">
    <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
    </nav>    <nav aria-label=“Pagination”>
    <ul class=“pagination pagination-sm”>
    <li class=“page-item”><a class=“page-link” href=“#”>Previous</a></li>
    <li class=“page-item”><a class=“page-link” href=“#”>1</a></li>
    <li class=“page-item”><a class=“page-link” href=“#”>Next</a></li>
    </ul>
    </nav>

    🔹 What happens?

    • The first pagination is large (pagination-lg).
    • The second pagination is small (pagination-sm).

    4️⃣ Centered Pagination

    ✅ Example: Centering Pagination

    html
    <nav aria-label="Pagination">
    <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
    </nav>

    🔹 What happens?

    • The pagination is centered (justify-content-center).

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Breadcrumbs & Pagination.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class is used for breadcrumbs?
    a) .breadcrumb-bar
    b) .breadcrumb
    c) .nav-breadcrumb
    d) .breadcrumb-list

    ✅ Correct Answer: b) .breadcrumb

    2️⃣ How do you highlight the current breadcrumb item?
    a) .breadcrumb-current
    b) .active
    c) .highlighted
    d) .breadcrumb-selected

    ✅ Correct Answer: b) .active

    3️⃣ What Bootstrap class is used for pagination links?
    a) .pagination-list
    b) .pagination
    c) .pager
    d) .nav-pagination

    ✅ Correct Answer: b) .pagination

    📌 True or False

    4️⃣ Bootstrap pagination can be made larger or smaller using .pagination-lg or .pagination-sm.
    ✅ Answer: True

    5️⃣ Breadcrumbs automatically track a user’s navigation.
    ✅ Answer: False (Breadcrumbs need to be manually set up.)

    🎯 Practical Challenge

    ✅ Create a breadcrumb navigation with:

    • Icons for each breadcrumb item
    • A highlighted active page
      ✅ Build a pagination component with:
    • “Previous” and “Next” buttons
    • Centered alignment (justify-content-center)
    • An active page indicator
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Breadcrumbs (.breadcrumb) improve website navigation.
    ✅ Pagination (.pagination) divides large datasets into pages.
    ✅ .active highlights the current page or breadcrumb.
    ✅ .pagination-lg and .pagination-sm adjust the pagination size.

  • Lesson 16: Offcanvas Navigation & Sidebars in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to create offcanvas navigation menus and sidebars for modern, responsive layouts in Bootstrap.

    🔹 1. Introduction to Offcanvas Navigation & Sidebars

    Offcanvas components create hidden sidebars that slide into view when triggered.
    They are used for mobile-friendly menus, side navigation, or hidden content panels.

    💡 Why Use Offcanvas & Sidebars?
    ✔️ Saves screen space – Hidden by default, slides in when needed.
    ✔️ Mobile-friendly – Ideal for small screens and app-style layouts.
    ✔️ Easy to implement – Bootstrap provides built-in support.

    🔹 2. Basic Offcanvas Navigation

    Offcanvas menus are hidden by default and appear when triggered.

    ✅ Example: Simple Offcanvas Navigation

    html
    <!-- Button to Open Offcanvas -->
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
    Open Menu
    </button>    <!– Offcanvas Sidebar –>
    <div class=“offcanvas offcanvas-start” id=“offcanvasNav”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Navigation</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-unstyled”>
    <li><a href=“#” class=“text-decoration-none”>Home</a></li>
    <li><a href=“#” class=“text-decoration-none”>About</a></li>
    <li><a href=“#” class=“text-decoration-none”>Services</a></li>
    <li><a href=“#” class=“text-decoration-none”>Contact</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • The offcanvas menu slides in from the left when clicking the button.
    • Clicking the close button (btn-close) hides the menu.

    🔹 3. Offcanvas Sidebar with a Navbar

    ✅ Example: Navbar with an Offcanvas Sidebar

    html
    <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
    <button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
    ☰ Open Sidebar
    </button>
    <a class="navbar-brand ms-2" href="#">Brand</a>
    </div>
    </nav>    <!– Sidebar Offcanvas –>
    <div class=“offcanvas offcanvas-start” id=“sidebar”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Sidebar Menu</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-group”>
    <li class=“list-group-item”><a href=“#”>Dashboard</a></li>
    <li class=“list-group-item”><a href=“#”>Profile</a></li>
    <li class=“list-group-item”><a href=“#”>Settings</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • The sidebar appears when clicking the ☰ button.
    • Each menu item is styled using Bootstrap’s .list-group.

    🔹 4. Offcanvas Positioning & Variants

    By default, offcanvas components slide in from the left (offcanvas-start).
    You can change its position using these classes:

    Class Effect
    .offcanvas-start Left sidebar (default)
    .offcanvas-end Right sidebar
    .offcanvas-top Slides in from the top
    .offcanvas-bottom Slides in from the bottom

    ✅ Example: Right-Side Offcanvas

    html
    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">
    Open Right Sidebar
    </button>    <div class=“offcanvas offcanvas-end” id=“offcanvasRight”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Right Sidebar</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <p>This sidebar appears from the right.</p>
    </div>
    </div>

    🔹 What happens?

    • The offcanvas slides in from the right instead of the left.

    🔹 5. Full-Screen Offcanvas Menu

    Use .offcanvas-full to create a full-screen menu experience.

    ✅ Example: Full-Screen Offcanvas

    html
    <button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#fullScreenMenu">
    Open Fullscreen Menu
    </button>    <div class=“offcanvas offcanvas-top” id=“fullScreenMenu” style=“height: 100vh;”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Full-Screen Menu</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body text-center”>
    <h2>Welcome to the Full-Screen Menu</h2>
    <p>Click outside to close.</p>
    </div>
    </div>

    🔹 What happens?

    • The menu covers the entire screen from the top.

    🔹 6. Permanent Sidebar for Desktop Layouts

    Use .d-lg-block to keep the sidebar always visible on large screens but collapsible on mobile.

    ✅ Example: Sidebar for Desktop & Offcanvas for Mobile

    html
    <div class="d-lg-block d-none bg-light p-3" style="width: 250px; height: 100vh; position: fixed;">
    <h5>Sidebar</h5>
    <ul class="list-unstyled">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Settings</a></li>
    </ul>
    </div>    <!– Offcanvas for Mobile –>
    <button class=“btn btn-primary d-lg-none” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#mobileSidebar”>
    Open Sidebar
    </button>

    <div class=“offcanvas offcanvas-start d-lg-none” id=“mobileSidebar”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Mobile Sidebar</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-unstyled”>
    <li><a href=“#”>Dashboard</a></li>
    <li><a href=“#”>Reports</a></li>
    <li><a href=“#”>Settings</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • On large screens (lg), the sidebar is always visible.
    • On mobile (d-lg-none), it becomes an offcanvas menu.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Offcanvas & Sidebars.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class is used to create a Bootstrap Offcanvas sidebar?
    a) .sidebar-menu
    b) .offcanvas
    c) .nav-offcanvas
    d) .menu-sidebar

    ✅ Correct Answer: b) .offcanvas

    2️⃣ How can you make an offcanvas menu appear from the right side?
    a) .offcanvas-right
    b) .offcanvas-end
    c) .offcanvas-left
    d) .offcanvas-side

    ✅ Correct Answer: b) .offcanvas-end

    📌 True or False

    3️⃣ Offcanvas navigation works without Bootstrap’s JavaScript.
    ✅ Answer: False (It requires Bootstrap’s JavaScript.)

    4️⃣ .d-lg-block keeps a sidebar visible on large screens.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a sidebar that is always visible on desktops but offcanvas on mobile.
    ✅ Build a right-side offcanvas menu with links and a close button.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Offcanvas (.offcanvas) creates hidden sidebars that slide in on button click.
    ✅ .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom control positioning.
    ✅ Permanent sidebars can be hidden on mobile and visible on desktop.