software-development-company-logo

Category: bootstrap

  • Lesson 30: Deploying the Website with GitHub Pages, Netlify, or Vercel

    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 deploy a Bootstrap website using GitHub Pages, Netlify, and Vercel for free.

    🔹 1. Introduction to Website Deployment

    After building a website, you need to host it online so others can access it.

    💡 Best Free Hosting Platforms:
    ✔️ GitHub Pages – Best for static sites, easy Git integration.
    ✔️ Netlify – Great for static & dynamic sites, supports continuous deployment.
    ✔️ Vercel – Best for Next.js & React projects, fast global CDN.

    🔹 2. Deploying with GitHub Pages

    GitHub Pages allows you to host static HTML, CSS, and JavaScript files directly from a GitHub repository.

    1️⃣ Step 1: Push Your Website to GitHub

    ✅ Create a New Repository on GitHub:

    1. Go to GitHub and click New Repository.
    2. Name the repository (e.g., my-bootstrap-website).
    3. Select Public and click Create Repository.

    ✅ Upload Your Website via Git

    sh
    git init
    git add .
    git commit -m "Initial commit"
    git branch -M main
    git remote add origin https://github.com/yourusername/my-bootstrap-website.git
    git push -u origin main

    🔹 What happens?

    • Your project is now on GitHub.

    2️⃣ Step 2: Enable GitHub Pages

    1. Go to your repository on GitHub.
    2. Click Settings → Pages.
    3. Under Source, select Deploy from branch.
    4. Choose main branch and click Save.
    5. GitHub generates a link:
      perl
      https://yourusername.github.io/my-bootstrap-website/

    🔹 What happens?

    • Your website is live on GitHub Pages! 🎉

    🔹 3. Deploying with Netlify

    Netlify allows you to deploy a website with drag-and-drop or Git integration.

    1️⃣ Step 1: Upload Files to Netlify

    1. Go to Netlify and sign up.
    2. Click New Site from Git.
    3. Choose GitHub and select your repository.
    4. Click Deploy Site.
    5. Your website will be hosted at:
      arduino
      https://your-site-name.netlify.app/

    🔹 What happens?

    • Netlify automatically deploys your site and updates on each Git commit.

    🔹 4. Deploying with Vercel

    Vercel is best for modern web apps and frameworks.

    1️⃣ Step 1: Deploy on Vercel

    1. Sign up at Vercel.
    2. Click New Project.
    3. Choose Import Git Repository.
    4. Select your Bootstrap project repository.
    5. Click Deploy.
    6. Your site will be hosted at:
      arduino
      https://your-project.vercel.app/

    🔹 What happens?

    • Vercel deploys and provides automatic updates.

    🔹 5. Custom Domains (Optional)

    You can connect a custom domain to GitHub Pages, Netlify, or Vercel.

    ✅ Example: Custom Domain on Netlify

    1. Go to Netlify → Site Settings.
    2. Click Domain Management.
    3. Add a custom domain (e.g., mywebsite.com).

    🔹 What happens?

    • Your site works with your domain name.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of website deployment.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ Which platform is best for hosting static sites?
    a) GitHub Pages
    b) Netlify
    c) Vercel
    d) All of the above

    ✅ Correct Answer: d) All of the above

    2️⃣ What command pushes your project to GitHub?
    a) git deploy
    b) git push origin main
    c) git upload
    d) git publish

    ✅ Correct Answer: b) git push origin main

    📌 True or False

    3️⃣ Netlify can deploy directly from GitHub.
    ✅ Answer: True

    4️⃣ You must pay to use GitHub Pages.
    ✅ Answer: False

    🎯 Practical Challenge

    ✅ Deploy your Bootstrap website on GitHub Pages.
    ✅ Deploy the same website on Netlify or Vercel.
    ✅ Connect a custom domain (Optional).
    ✅ Post your live website link in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ GitHub Pages, Netlify, and Vercel provide free hosting.
    ✅ GitHub Pages is best for simple static sites.
    ✅ Netlify & Vercel offer better automation & custom domains.
    ✅ Deployment ensures your website is accessible to users worldwide.

  • Lesson 29: Adding Interactive Components (Forms, Modals, Sliders) 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 add interactive UI components like forms, modals, and sliders to enhance user experience.

    🔹 1. Why Add Interactive Components?

    Interactive components make a website more engaging and user-friendly.

    💡 Key Benefits:
    ✔️ Enhances user experience – Forms for data collection, modals for popups.
    ✔️ Reduces page reloads – Users can interact without navigating away.
    ✔️ Improves engagement – Sliders & animations keep users interested.

    🔹 2. Adding Forms for User Input

    Forms allow users to submit data like contact information or feedback.

    1️⃣ Creating a Basic Bootstrap Form

    ✅ Example: Contact Form

    html
    <section class="container mt-5">
    <h2>Contact Us</h2>
    <form>
    <div class="mb-3">
    <label class="form-label">Your Name</label>
    <input type="text" class="form-control" placeholder="Enter your name">
    </div>
    <div class="mb-3">
    <label class="form-label">Your Email</label>
    <input type="email" class="form-control" placeholder="Enter your email">
    </div>
    <div class="mb-3">
    <label class="form-label">Message</label>
    <textarea class="form-control" rows="4" placeholder="Enter your message"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
    </section>

    🔹 What happens?

    • The form collects user data and provides a submit button.

    2️⃣ Form Validation & Error Handling

    ✅ Example: Bootstrap Form with 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>
    <button type="submit" class="btn btn-success">Submit</button>
    </form>

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

    🔹 What happens?

    • If the email field is empty, an error message appears.

    🔹 3. Adding Bootstrap Modals (Popups)

    Modals are pop-up dialogs used for alerts, forms, or additional content.

    1️⃣ Creating a Simple Modal

    ✅ Example: Bootstrap 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 Structure -->
    <div class="modal fade" id="myModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">My Bootstrap Modal</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
    This is a simple Bootstrap modal!
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • Clicking the button triggers the modal popup.

    2️⃣ Using Modals for Forms

    ✅ Example: Contact Form Inside a Modal

    html
    <!-- Button to Open Modal -->
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#contactModal">
    Contact Us
    </button>

    <!-- Modal -->
    <div class="modal fade" id="contactModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">Contact Us</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
    <form>
    <div class="mb-3">
    <label class="form-label">Your Name</label>
    <input type="text" class="form-control" placeholder="Enter your name">
    </div>
    <div class="mb-3">
    <label class="form-label">Your Email</label>
    <input type="email" class="form-control" placeholder="Enter your email">
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
    </form>
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • The modal contains a contact form, improving user experience.

    🔹 4. Adding Bootstrap Sliders (Carousels)

    A slider (carousel) rotates images or content automatically.

    1️⃣ Basic Image Carousel

    ✅ Example: Bootstrap Image Slider

    html
    <div id="imageCarousel" 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="#imageCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    </button>
    </div>

    🔹 What happens?

    • The slider cycles through images automatically.
    • Navigation buttons allow users to move between slides.

    2️⃣ Adding Captions & Indicators

    ✅ Example: Slider with Captions

    html
    <div id="captionCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
    <button type="button" data-bs-target="#captionCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#captionCarousel" data-bs-slide-to="1"></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 Slide 1</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 Slide 2</p>
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • Each slide has captions and navigation indicators.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap interactive components.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap component is used for popups?
    a) .popup-box
    b) .modal
    c) .alert
    d) .tooltip

    ✅ Correct Answer: b) .modal

    2️⃣ What Bootstrap class adds form validation?
    a) .form-check
    b) .form-validate
    c) .was-validated
    d) .needs-validation

    ✅ Correct Answer: d) .needs-validation

    🎯 Practical Challenge

    ✅ Build a contact form with validation.
    ✅ Create a modal popup with a form inside.
    ✅ Add a Bootstrap slider with captions and navigation buttons.
    ✅ Post your solution in the discussion forum for feedback!

  • Lesson 28: Building the Homepage & Navigation

    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 build a fully responsive homepage with Bootstrap navigation, hero section, and call-to-action buttons.

    🔹 1. Homepage Structure & Key Components

    A well-designed homepage includes:
    1️⃣ Navigation Bar – Provides links to key pages.
    2️⃣ Hero Section – Showcases a headline & call-to-action (CTA).
    3️⃣ About/Features Section – Describes the website’s purpose.
    4️⃣ Testimonials/Portfolio – Builds trust with users.
    5️⃣ Contact Section – Allows visitors to reach out.

    ✅ Example: Homepage Layout

    markdown
    -------------------------------------------------
    | LOGO | NAVBAR (Home, About, Services) |
    -------------------------------------------------
    | HERO SECTION (Image + Headline + CTA) |
    -------------------------------------------------
    | ABOUT / FEATURES |
    -------------------------------------------------
    | TESTIMONIALS / PORTFOLIO |
    -------------------------------------------------
    | CONTACT FORM |
    -------------------------------------------------
    | FOOTER |
    -------------------------------------------------

    🔹 What happens?

    • The layout follows a structured flow for better user experience.

    🔹 2. Creating the Navigation Bar

    Bootstrap makes it easy to create a responsive navbar.

    ✅ Example: Bootstrap Navigation Bar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ms-auto">
    <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
    <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The logo is on the left, and links are on the right.
    • The menu collapses into a hamburger icon on mobile.

    🔹 3. Creating a Hero Section

    A hero section grabs attention and includes a headline, text, and call-to-action (CTA) buttons.

    ✅ Example: Bootstrap Hero Section

    html
    <section id="home" class="bg-primary text-white text-center p-5">
    <div class="container">
    <h1>Welcome to My Website</h1>
    <p>Your one-stop solution for web development.</p>
    <a href="#services" class="btn btn-light btn-lg">Get Started</a>
    <a href="#contact" class="btn btn-outline-light btn-lg">Contact Us</a>
    </div>
    </section>

    🔹 What happens?

    • The hero section has a background color and CTA buttons.

    🔹 4. Adding an About/Features Section

    This section introduces your business/services.

    ✅ Example: About/Features Section

    html
    <section id="about" class="container mt-5">
    <div class="row align-items-center">
    <div class="col-md-6">
    <h2>About Us</h2>
    <p>We provide high-quality web development services using modern technologies.</p>
    </div>
    <div class="col-md-6">
    <img src="about-image.jpg" class="img-fluid rounded">
    </div>
    </div>
    </section>

    🔹 What happens?

    • Text is on the left, and an image is on the right.

    🔹 5. Adding a Services Section

    This section displays key offerings using Bootstrap cards.

    ✅ Example: Services Section

    html
    <section id="services" class="container mt-5">
    <h2 class="text-center">Our Services</h2>
    <div class="row">
    <div class="col-md-4">
    <div class="card p-3">
    <h4>Web Development</h4>
    <p>We create stunning, responsive websites for your business.</p>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card p-3">
    <h4>SEO Optimization</h4>
    <p>Boost your website’s visibility on search engines.</p>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card p-3">
    <h4>Digital Marketing</h4>
    <p>Increase engagement with targeted digital campaigns.</p>
    </div>
    </div>
    </div>
    </section>

    🔹 What happens?

    • Services are displayed in a responsive grid using Bootstrap cards.

    🔹 6. Adding Testimonials (Optional)

    A testimonial section builds trust with new visitors.

    ✅ Example: Testimonials Section

    html
    <section id="testimonials" class="bg-light p-5">
    <div class="container text-center">
    <h2>What Our Clients Say</h2>
    <blockquote class="blockquote">
    <p>"Amazing service! Our website traffic increased by 200%!"</p>
    <footer class="blockquote-footer">John Doe, CEO</footer>
    </blockquote>
    </div>
    </section>

    🔹 What happens?

    • Testimonials improve credibility and social proof.

    🔹 7. Adding a Contact Section

    A contact form allows visitors to reach out.

    ✅ Example: Bootstrap Contact Form

    html
    <section id="contact" class="container mt-5">
    <h2>Contact Us</h2>
    <form>
    <div class="mb-3">
    <label class="form-label">Your Name</label>
    <input type="text" class="form-control">
    </div>
    <div class="mb-3">
    <label class="form-label">Your Email</label>
    <input type="email" class="form-control">
    </div>
    <div class="mb-3">
    <label class="form-label">Message</label>
    <textarea class="form-control" rows="4"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
    </section>

    🔹 What happens?

    • A simple contact form is included with name, email, and message fields.

    🔹 8. Adding a Footer

    A footer provides essential links and social media icons.

    ✅ Example: Footer Section

    html
    <footer class="bg-dark text-white text-center p-3 mt-5">
    <p>&copy; 2025 MyWebsite. All rights reserved.</p>
    </footer>

    🔹 What happens?

    • A simple footer is added at the bottom of the page.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap homepage building.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What is the purpose of a hero section?
    a) Display testimonials
    b) Introduce the website with a headline & CTA
    c) List services
    d) Show a footer

    ✅ Correct Answer: b) Introduce the website with a headline & CTA

    2️⃣ What Bootstrap class makes a navbar collapse on mobile?
    a) .navbar-mobile
    b) .navbar-small
    c) .navbar-collapse
    d) .navbar-hide

    ✅ Correct Answer: c) .navbar-collapse

    📌 True or False

    3️⃣ The contact form requires Bootstrap JavaScript to function.
    ✅ Answer: False

    4️⃣ The homepage should include a clear call-to-action (CTA).
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Build a complete homepage with Bootstrap.
    ✅ Add a responsive navbar, hero section, and services section.
    ✅ Include a contact form and footer.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ The homepage includes navigation, hero, services, testimonials, and contact sections.
    ✅ Bootstrap components like cards, buttons, and grids help structure the page.
    ✅ A responsive navbar ensures easy mobile navigation.

  • Lesson 27: Planning & Wireframing a Bootstrap Website

    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 plan, wireframe, and prototype a website before building it with Bootstrap.

    🔹 1. Introduction to Website Planning

    Before coding a website, it’s important to plan the structure, layout, and features.

    💡 Why Plan & Wireframe First?
    ✔️ Saves time – Avoid unnecessary revisions.
    ✔️ Improves user experience – Ensures a clear navigation structure.
    ✔️ Enhances collaboration – Helps designers and developers stay aligned.

    🔹 2. Steps to Plan a Bootstrap Website

    1️⃣ Define Website Goals

    Before designing, ask:

    • What is the purpose of the website? (e.g., business, blog, e-commerce)
    • Who is the target audience?
    • What features are needed? (e.g., contact form, testimonials, navbar)

    ✅ Example: Goals for a Portfolio Website

    • Showcase projects and skills.
    • Provide contact information.
    • Have a simple, mobile-friendly design.

    2️⃣ Create a Sitemap

    A sitemap is a visual representation of the website’s pages.

    ✅ Example: Sitemap for a Portfolio Website

    Home
    ├── About
    ├── Projects
    │ ├── Project 1
    │ ├── Project 2
    │ ├── Project 3
    ├── Blog
    ├── Contact

    🔹 What happens?

    • The sitemap helps plan which pages to include.

    3️⃣ Choose a Bootstrap Layout

    Bootstrap offers predefined grid layouts:

    ✅ Common Bootstrap Layout Choices:

    • Single-page layout (for portfolios & landing pages)
    • Multi-page layout (for blogs & businesses)
    • Dashboard layout (for admin panels)

    🔹 3. Wireframing a Bootstrap Website

    A wireframe is a basic sketch of a website’s layout.

    ✅ Best Wireframing Tools:

    • Pen & Paper – Quick & simple.
    • Figma – Free, web-based design tool.
    • Balsamiq – Easy low-fidelity wireframing.
    • Adobe XD – Professional UI/UX design tool.

    1️⃣ Example Wireframe for a Portfolio Website

    markdown
    -------------------------------------------------
    | LOGO | NAVBAR (Home, About, Work) |
    -------------------------------------------------
    | HERO SECTION (Image + Headline + CTA) |
    -------------------------------------------------
    | ABOUT ME (Text + Image) |
    -------------------------------------------------
    | PROJECTS (Grid of 3 projects) |
    -------------------------------------------------
    | CONTACT FORM |
    -------------------------------------------------
    | FOOTER |
    -------------------------------------------------

    🔹 What happens?

    • The wireframe helps visualize where elements should go.

    🔹 4. Converting a Wireframe into Bootstrap Code

    1️⃣ Building a Navbar

    ✅ Example: Bootstrap Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">My Portfolio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
    <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • A responsive navigation menu is created.

    2️⃣ Building a Hero Section

    ✅ Example: Bootstrap Hero Section

    html
    <section class="bg-primary text-white text-center p-5">
    <h1>Welcome to My Portfolio</h1>
    <p>Frontend Developer | UI Designer</p>
    <a href="#projects" class="btn btn-light">View My Work</a>
    </section>

    🔹 What happens?

    • A hero banner with a button is created.

    3️⃣ Creating a Responsive Grid for Projects

    ✅ Example: Bootstrap Project Grid

    html
    <section class="container mt-5">
    <div class="row">
    <div class="col-md-4">
    <div class="card">
    <img src="project1.jpg" class="card-img-top">
    <div class="card-body">
    <h5 class="card-title">Project 1</h5>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card">
    <img src="project2.jpg" class="card-img-top">
    <div class="card-body">
    <h5 class="card-title">Project 2</h5>
    </div>
    </div>
    </div>
    </div>
    </section>

    🔹 What happens?

    • The grid layout adapts to different screen sizes.

    4️⃣ Adding a Contact Form

    ✅ Example: Bootstrap Contact Form

    html
    <section class="container mt-5">
    <h2>Contact Me</h2>
    <form>
    <div class="mb-3">
    <label class="form-label">Your Name</label>
    <input type="text" class="form-control">
    </div>
    <div class="mb-3">
    <label class="form-label">Your Email</label>
    <input type="email" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
    </section>

    🔹 What happens?

    • A simple contact form is added.

    🔹 5. Testing the Wireframe with Bootstrap

    ✅ Testing the Layout on Different Devices

    • Use Chrome DevTools (F12) to test responsiveness.
    • Adjust columns (col-md-4, col-lg-6) for better layouts.

    ✅ Example: Adjusting Columns for Mobile

    html
    <div class="col-12 col-md-6 col-lg-4">Project</div>

    🔹 What happens?

    • The layout stacks on small screens and displays in a grid on larger screens.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of planning and wireframing.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What is the first step in website planning?
    a) Start coding immediately
    b) Define website goals
    c) Download Bootstrap
    d) Design a logo

    ✅ Correct Answer: b) Define website goals

    2️⃣ What tool can be used for wireframing?
    a) Photoshop
    b) Figma
    c) Microsoft Word
    d) Bootstrap

    ✅ Correct Answer: b) Figma

    📌 True or False

    3️⃣ A wireframe should include detailed colors and images.
    ✅ Answer: False

    4️⃣ A sitemap helps define the website’s structure.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a wireframe for a personal portfolio website.
    ✅ Build a Bootstrap layout based on your wireframe.
    ✅ Adjust columns and sections to be fully responsive.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Website planning includes defining goals, creating a sitemap, and wireframing.
    ✅ Wireframing tools like Figma or Balsamiq help visualize layouts.
    ✅ Bootstrap’s grid system makes layouts responsive.
    ✅ Testing wireframes in Bootstrap ensures a functional design.

  • Lesson 26: Bootstrap with Vue.js (BootstrapVue)

    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 with Vue.js, including BootstrapVue, and compare it with other UI frameworks like Vuetify.

    🔹 1. Introduction to Bootstrap in Vue.js

    Bootstrap is a popular UI framework for building responsive designs. When using Vue.js, BootstrapVue provides Vue-specific components.

    💡 Why Use Bootstrap with Vue.js?
    ✔️ Pre-built responsive UI components.
    ✔️ Works well with Vue’s reactivity system.
    ✔️ No need for jQuery – Fully Vue-friendly.

    🔹 2. Installing Bootstrap in a Vue Project

    There are two ways to use Bootstrap with Vue.js:

    1️⃣ Method 1: Using Bootstrap CDN

    ✅ Add Bootstrap’s CDN to index.html

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

    🔹 What happens?

    • You can use Bootstrap classes in your Vue templates, but you won’t have Vue components.

    2️⃣ Method 2: Installing Bootstrap via npm

    ✅ Run the following command in your Vue project:

    sh
    npm install bootstrap

    ✅ Import Bootstrap in main.js:

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

    🔹 What happens?

    • This allows Bootstrap styles and JavaScript components to work in Vue.

    🔹 3. Installing & Using BootstrapVue

    BootstrapVue provides Vue components that work with Bootstrap.

    1️⃣ Installing BootstrapVue

    ✅ Run the following command:

    sh
    npm install bootstrap-vue

    ✅ Import BootstrapVue in main.js:

    javascript
    import { createApp } from "vue";
    import App from "./App.vue";
    import { BootstrapVue3 } from "bootstrap-vue-3";
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

    const app = createApp(App);
    app.use(BootstrapVue3);
    app.mount("#app");

    🔹 What happens?

    • BootstrapVue components are now available in your Vue app.

    🔹 4. Using Bootstrap Components in Vue.js

    Now you can use BootstrapVue’s prebuilt Vue components.

    1️⃣ Example: Using BootstrapVue Button

    ✅ Example: Simple BootstrapVue Button

    vue
    <template>
    <b-button variant="primary">Click Me</b-button>
    </template>

    🔹 What happens?

    • The button uses Bootstrap’s primary button styling without needing classes.

    2️⃣ Example: BootstrapVue Grid System

    ✅ Example: Responsive Layout

    vue
    <template>
    <b-container>
    <b-row>
    <b-col cols="6" class="bg-primary text-white p-3">Column 1</b-col>
    <b-col cols="6" class="bg-secondary text-white p-3">Column 2</b-col>
    </b-row>
    </b-container>
    </template>

    🔹 What happens?

    • A responsive layout is created with two columns.

    🔹 5. Using BootstrapVue Forms

    ✅ Example: Form with Validation

    vue
    <template>
    <b-form @submit.prevent="handleSubmit">
    <b-form-group label="Email">
    <b-form-input v-model="email" type="email" required></b-form-input>
    </b-form-group>
    <b-form-group label="Password">
    <b-form-input v-model="password" type="password" required></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="success">Submit</b-button>
    </b-form>
    </template>

    <script>
    export default {
    data() {
    return {
    email: "",
    password: "",
    };
    },
    methods: {
    handleSubmit() {
    alert(`Email: ${this.email}, Password: ${this.password}`);
    },
    },
    };
    </script>

    🔹 What happens?

    • The form validates inputs and displays alerts on submit.

    🔹 6. BootstrapVue Tables

    BootstrapVue provides custom table components for displaying data.

    ✅ Example: Dynamic Table

    vue
    <template>
    <b-table :items="users" :fields="fields"></b-table>
    </template>

    <script>
    export default {
    data() {
    return {
    fields: ["id", "name", "email"],
    users: [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bob@example.com" },
    ],
    };
    },
    };
    </script>

    🔹 What happens?

    • The table dynamically displays user data.

    🔹 7. BootstrapVue vs Vuetify

    BootstrapVue and Vuetify are two popular UI frameworks for Vue.

    Feature BootstrapVue Vuetify
    Design Style Traditional Bootstrap Google Material Design
    Grid System Uses Bootstrap grid Uses Material Design grid
    Components Prebuilt Vue components Advanced Material components
    Customization SCSS variables Uses Theme Provider
    Flexibility Works with any design system Strict Material Design rules

    ✅ Use BootstrapVue if:

    • You want familiar Bootstrap styling.
    • You need easy-to-use responsive layouts.

    ✅ Use Vuetify if:

    • You need a modern Material Design UI.
    • You want advanced Vue-specific components.

    🔹 8. Adding BootstrapVue Modals

    Modals are popups for forms or alerts.

    ✅ Example: BootstrapVue Modal

    vue
    <template>
    <b-button v-b-modal.modal1>Open Modal</b-button>

    <b-modal id="modal1" title="BootstrapVue Modal">
    <p>Modal content goes here.</p>
    </b-modal>
    </template>

    🔹 What happens?

    • Clicking the button opens a modal dialog.

    🔹 9. Adding BootstrapVue Alerts

    Alerts are useful for notifications and messages.

    ✅ Example: Alert Message

    vue
    <template>
    <b-alert show variant="danger">Error: Something went wrong!</b-alert>
    </template>

    🔹 What happens?

    • A red error message is displayed.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of BootstrapVue.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What command installs BootstrapVue?
    a) npm install bootstrap-vue
    b) npm install vue-bootstrap
    c) npm install bootstrapjs-vue
    d) npm install vue-bootstrap-ui

    ✅ Correct Answer: a) npm install bootstrap-vue

    2️⃣ What is the main difference between BootstrapVue and Vuetify?
    a) BootstrapVue uses Material Design principles
    b) Vuetify follows Bootstrap’s grid system
    c) BootstrapVue uses Bootstrap’s design, while Vuetify follows Material Design
    d) BootstrapVue requires jQuery

    ✅ Correct Answer: c) BootstrapVue uses Bootstrap’s design, while Vuetify follows Material Design

    📌 True or False

    3️⃣ BootstrapVue provides Vue-specific components like <b-button>.
    ✅ Answer: True

    4️⃣ You can use Bootstrap’s CDN with Vue, but won’t have BootstrapVue components.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Install BootstrapVue and create a responsive form with BootstrapVue components.
    ✅ Add a BootstrapVue table to display sample data.
    ✅ Create a modal popup with BootstrapVue.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ BootstrapVue adds Vue-friendly components for Bootstrap.
    ✅ It provides prebuilt components like <b-button> and <b-form>.
    ✅ BootstrapVue is great for traditional UI, while Vuetify follows Material Design.

  • 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.