software-development-company-logo

Category: bootstrap

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

  • Lesson 15: Dropdowns & Mega Menus 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 dropdown menus and mega menus in Bootstrap for improved navigation.

    🔹 1. Introduction to Dropdowns & Mega Menus

    Dropdowns and mega menus help organize complex navigation by grouping multiple links together.

    💡 Why Use Bootstrap Dropdowns & Mega Menus?
    ✔️ User-friendly navigation for websites with multiple sections.
    ✔️ Expandable menus that display subcategories.
    ✔️ Customizable layouts for better UI/UX.

    🔹 2. Creating a Basic Dropdown Menu

    A dropdown menu allows users to reveal additional options when clicking a button or link.

    ✅ Example: Simple Dropdown

    html
    <div class="container mt-3">
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Select an Option
    </button>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • Clicking the button reveals a dropdown list with three options.

    🔹 3. Dropdown Inside Navbar

    Dropdowns are commonly used in navigation bars.

    ✅ Example: Navbar with a Dropdown

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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="#">Home</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
    Services
    </a>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web Design</a></li>
    <li><a class="dropdown-item" href="#">SEO</a></li>
    <li><a class="dropdown-item" href="#">Marketing</a></li>
    </ul>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The “Services” dropdown appears inside the navbar.

    🔹 4. Adding Dropdown Variants

    You can change dropdown behavior using alignment and positioning classes.

    1️⃣ Right-Aligned Dropdown (.dropdown-menu-end)

    ✅ Example: Right-Aligned Dropdown

    html
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Right Aligned
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another Action</a></li>
    </ul>
    </div>

    🔹 What happens?

    • The dropdown aligns to the right.

    2️⃣ Split Button Dropdown

    ✅ Example: Split Button Dropdown

    html
    <div class="btn-group">
    <button class="btn btn-success">Main Action</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    </button>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Sub Option 1</a></li>
    <li><a class="dropdown-item" href="#">Sub Option 2</a></li>
    </ul>
    </div>

    🔹 What happens?

    • The main button triggers an action, and the dropdown button expands options.

    🔹 5. Creating a Mega Menu

    Mega menus display multiple columns of links, great for e-commerce and dashboards.

    ✅ Example: Mega Menu

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown">
    Mega Menu
    </a>
    <div class="dropdown-menu p-4">
    <div class="row">
    <div class="col-md-4">
    <h6>Category 1</h6>
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    </div>
    <div class="col-md-4">
    <h6>Category 2</h6>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a>
    </div>
    <div class="col-md-4">
    <h6>Category 3</h6>
    <a class="dropdown-item" href="#">Link 5</a>
    <a class="dropdown-item" href="#">Link 6</a>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The dropdown expands into a multi-column layout.

    🔹 6. Adding Icons to Dropdowns

    Use Bootstrap Icons or FontAwesome inside dropdown items.

    ✅ Example: Dropdown with Icons

    html
    <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-person"></i> Profile</a></li>
    </ul>

    🔹 What happens?

    • Each menu item has an icon next to it.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Dropdowns & Mega Menus.

    📌 Multiple-Choice Questions (MCQs)

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

    ✅ Correct Answer: b) .dropdown-menu

    2️⃣ Which class aligns a dropdown menu to the right?
    a) .dropdown-right
    b) .align-end
    c) .dropdown-menu-end
    d) .dropdown-align-right

    ✅ Correct Answer: c) .dropdown-menu-end

    3️⃣ How do you create a multi-column mega menu?
    a) Use .mega-dropdown
    b) Use .dropdown-menu inside a Bootstrap .row
    c) Use .multi-dropdown
    d) Use .navbar-mega

    ✅ Correct Answer: b) Use .dropdown-menu inside a Bootstrap .row

    📌 True or False

    4️⃣ Dropdowns require Bootstrap’s JavaScript to function.
    ✅ Answer: True

    5️⃣ Mega menus are only possible using external CSS.
    ✅ Answer: False

    🎯 Practical Challenge

    ✅ Create a fully responsive mega menu with:

    • A multi-column layout
    • Icons inside dropdown links
    • A search box inside the dropdown
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Dropdowns (.dropdown-menu) expand on button click.
    ✅ .dropdown-menu-end aligns dropdowns to the right.
    ✅ Mega menus use .dropdown-menu and Bootstrap’s grid system.
    ✅ Icons & additional elements can be added inside dropdowns.

  • Lesson 14: Creating a Responsive Navbar 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 build a fully responsive navigation bar (navbar) using Bootstrap.

    🔹 1. Introduction to Bootstrap Navbar

    A navigation bar (navbar) is a key UI component in websites, allowing users to navigate between pages.
    Bootstrap provides a prebuilt navbar structure with mobile-friendly behavior.

    💡 Why Use Bootstrap Navbar?
    ✔️ Pre-styled and customizable
    ✔️ Mobile-first and responsive
    ✔️ Supports dropdowns, brand logos, and search forms

    🔹 2. Basic Bootstrap Navbar Structure

    A Bootstrap navbar is created using the .navbar class.

    ✅ Example: Basic Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The brand/logo appears on the left.
    • The menu collapses into a hamburger button on small screens.

    🔹 3. Customizing Navbar Colors & Themes

    You can change the navbar color scheme using .navbar-light and .navbar-dark.

    ✅ Example: Dark Navbar with a Blue Background

    html
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
    <a class="navbar-brand" href="#">My Website</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="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The navbar background turns blue (bg-primary).
    • The text is white (navbar-dark) for better contrast.

    🔹 4. Adding a Dropdown Menu

    Dropdown menus allow users to select options from a list.

    ✅ Example: Navbar with a Dropdown

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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="#">Home</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
    Services
    </a>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web Development</a></li>
    <li><a class="dropdown-item" href="#">SEO</a></li>
    <li><a class="dropdown-item" href="#">Marketing</a></li>
    </ul>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The “Services” menu expands on hover to show more options.

    🔹 5. Adding a Search Box to the Navbar

    A search input field can be placed inside the navbar.

    ✅ Example: Navbar with a Search Box

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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 me-auto">
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
    <form class="d-flex">
    <input class="form-control me-2" type="search" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • A search bar appears on the right of the navbar.
    • The search button uses .btn-outline-success.

    🔹 6. Making the Navbar Sticky or Fixed

    You can make the navbar stick to the top of the page when scrolling.

    1️⃣ Sticky Navbar

    Use .sticky-top to keep the navbar always visible at the top.

    ✅ Example: Sticky Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container">
    <a class="navbar-brand" href="#">Sticky Navbar</a>
    </div>
    </nav>

    🔹 What happens?

    • The navbar remains at the top when scrolling.

    2️⃣ Fixed Navbar

    Use .fixed-top to always keep the navbar at the top.

    ✅ Example: Fixed Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
    <a class="navbar-brand" href="#">Fixed Navbar</a>
    </div>
    </nav>

    🔹 What happens?

    • The navbar stays fixed at the top, even when scrolling.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Navbar.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class makes a navbar responsive?
    a) .navbar-fixed
    b) .navbar-responsive
    c) .navbar-expand-lg
    d) .navbar-mobile

    ✅ Correct Answer: c) .navbar-expand-lg

    2️⃣ What class is used to make a navbar sticky when scrolling?
    a) .fixed-navbar
    b) .sticky-navbar
    c) .navbar-top
    d) .sticky-top

    ✅ Correct Answer: d) .sticky-top

    3️⃣ How do you add a dropdown menu inside a Bootstrap navbar?
    a) .navbar-dropdown
    b) .dropdown-menu
    c) .menu-dropdown
    d) .navbar-toggle

    ✅ Correct Answer: b) .dropdown-menu

    📌 True or False

    4️⃣ The .navbar-dark class makes navbar text light-colored.
    ✅ Answer: True

    5️⃣ The .navbar-toggler class is required to make a navbar collapsible on mobile.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a fully responsive Bootstrap navbar with:

    • A brand/logo
    • A dropdown menu for “Services”
    • A search box inside the navbar
    • A sticky navbar at the top
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap Navbar (.navbar) provides mobile-friendly navigation.
    ✅ .navbar-expand-lg makes the navbar expand on larger screens.
    ✅ Dropdowns (.dropdown-menu) add extra menu options.
    ✅ .sticky-top and .fixed-top keep the navbar visible when scrolling.

  • Lesson 13: Tables & Data Display Components 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 tables and data display components to create well-structured, responsive, and interactive tables.

    🔹 1. Introduction to Bootstrap Tables & Data Display Components

    Tables are used to display structured data, such as user information, financial records, or lists.
    Bootstrap provides pre-styled tables and interactive features like striping, borders, hover effects, and responsiveness.

    💡 Why Use Bootstrap Tables?
    ✔️ Pre-styled tables without extra CSS.
    ✔️ Responsive and mobile-friendly.
    ✔️ Sortable and interactive using Bootstrap JS or external plugins.

    🔹 2. Basic Bootstrap Table

    Use .table to create a basic table with Bootstrap styles.

    ✅ Example: Basic Table

    html
    <div class="container">
    <table class="table">
    <thead>
    <tr>
    <th>#</th>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Alice</td>
    <td>alice@example.com</td>
    <td>Admin</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Bob</td>
    <td>bob@example.com</td>
    <td>User</td>
    </tr>
    </tbody>
    </table>
    </div>

    🔹 What happens?

    • The table is automatically styled and spaced with Bootstrap.

    🔹 3. Advanced Table Styling

    1️⃣ Striped Rows (.table-striped)

    ✅ Example: Striped Rows

    html
    <table class="table table-striped">
    <thead>
    <tr>
    <th>#</th>
    <th>Product</th>
    <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Laptop</td>
    <td>$999</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Phone</td>
    <td>$499</td>
    </tr>
    </tbody>
    </table>

    🔹 What happens?

    • Every other row gets a striped background, improving readability.

    2️⃣ Hover Effects (.table-hover)

    ✅ Example: Table with Hover Effects

    html
    <table class="table table-hover">
    <thead>
    <tr>
    <th>#</th>
    <th>Service</th>
    <th>Cost</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Web Development</td>
    <td>$1500</td>
    </tr>
    <tr>
    <td>2</td>
    <td>SEO Optimization</td>
    <td>$800</td>
    </tr>
    </tbody>
    </table>

    🔹 What happens?

    • Rows change background color when hovered.

    3️⃣ Bordered Tables (.table-bordered)

    ✅ Example: Table with Borders

    html
    <table class="table table-bordered">
    <thead>
    <tr>
    <th>Item</th>
    <th>Category</th>
    <th>Stock</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Keyboard</td>
    <td>Electronics</td>
    <td>20</td>
    </tr>
    <tr>
    <td>Desk Chair</td>
    <td>Furniture</td>
    <td>5</td>
    </tr>
    </tbody>
    </table>

    🔹 What happens?

    • Adds borders around the entire table and each cell.

    4️⃣ Small & Large Tables (.table-sm & .table-lg)

    ✅ Example: Compact Table (.table-sm)

    html
    <table class="table table-sm">
    <thead>
    <tr>
    <th>Task</th>
    <th>Deadline</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Design Homepage</td>
    <td>Oct 10</td>
    </tr>
    <tr>
    <td>Develop Backend</td>
    <td>Oct 20</td>
    </tr>
    </tbody>
    </table>

    🔹 What happens?

    • Reduces padding inside table cells, making it more compact.

    🔹 4. Responsive Tables (.table-responsive)

    Use .table-responsive to make tables scrollable on small screens.

    ✅ Example: Responsive Table

    html
    <div class="table-responsive">
    <table class="table">
    <thead>
    <tr>
    <th>#</th>
    <th>Employee</th>
    <th>Department</th>
    <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>HR</td>
    <td>$5000</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>Marketing</td>
    <td>$4500</td>
    </tr>
    </tbody>
    </table>
    </div>

    🔹 What happens?

    • The table scrolls horizontally on small screens.

    🔹 5. Advanced Interactive Tables

    Use JavaScript and Bootstrap utilities to make tables sortable, searchable, and interactive.

    1️⃣ Sortable Tables

    ✅ Example: Sortable Table Using JavaScript

    html
    <table class="table table-hover" id="sortableTable">
    <thead>
    <tr>
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Alice</td>
    <td>25</td>
    </tr>
    <tr>
    <td>Bob</td>
    <td>30</td>
    </tr>
    </tbody>
    </table>

    <script>
    function sortTable(columnIndex) {
    let table = document.getElementById("sortableTable");
    let rows = Array.from(table.rows).slice(1);
    rows.sort((a, b) => a.cells[columnIndex].innerText.localeCompare(b.cells[columnIndex].innerText));
    rows.forEach(row => table.appendChild(row));
    }
    </script>

    🔹 What happens?

    • Clicking on column headers sorts the table dynamically.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Tables.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class is used to make a Bootstrap table responsive?
    a) .table-scroll
    b) .table-responsive
    c) .table-mobile
    d) .table-fluid

    ✅ Correct Answer: b) .table-responsive

    2️⃣ How can you add row hover effects in a Bootstrap table?
    a) .table-hover
    b) .table-strip
    c) .table-highlight
    d) .hover-effect

    ✅ Correct Answer: a) .table-hover

    3️⃣ What class reduces padding inside table cells?
    a) .table-small
    b) .table-condensed
    c) .table-sm
    d) .table-compact

    ✅ Correct Answer: c) .table-sm

    📌 True or False

    4️⃣ Bootstrap provides built-in JavaScript sorting for tables.
    ✅ Answer: False (Sorting requires custom JavaScript or a plugin.)

    5️⃣ The .table-striped class adds zebra striping to rows.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a responsive table with:

    • Striped rows (.table-striped)
    • Hover effects (.table-hover)
    • Column sorting (using JavaScript)
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap tables (.table) are pre-styled and responsive.
    ✅ .table-striped, .table-hover, .table-bordered enhance table styling.
    ✅ JavaScript or third-party plugins can make tables sortable & searchable.

  • Lesson 12: Cards, Accordions & Progress Bars 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 Cards, Accordions, and Progress Bars to create structured content layouts, collapsible sections, and visual progress indicators.

    🔹 1. Introduction to Cards, Accordions & Progress Bars

    Bootstrap provides pre-styled UI components to enhance the visual structure of your website.

    💡 Why Use These Components?
    ✔️ Cards help create flexible content containers with images, text, and buttons.
    ✔️ Accordions allow collapsible sections for FAQs and hidden content.
    ✔️ Progress Bars visually indicate loading, downloads, or task progress.

    🔹 2. Bootstrap Cards

    Cards are versatile content containers that can include titles, text, images, buttons, and footers.

    1️⃣ Basic Card Structure

    ✅ Example: Simple Card

    html
    <div class="container">
    <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder Image">
    <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a basic Bootstrap card with an image, text, and a button.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
    </div>
    </div>
    </div>

    🔹 What happens?

    • A styled card appears with an image, title, text, and button.

    2️⃣ Cards with Headers & Footers

    ✅ Example: Adding Headers & Footers

    html
    <div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
    <h5 class="card-title">Special Card</h5>
    <p class="card-text">This card has a header and a footer.</p>
    </div>
    <div class="card-footer text-muted">Updated 2 days ago</div>
    </div>

    🔹 What happens?

    • A header and footer appear inside the card.

    3️⃣ Card Grid Layout

    You can align multiple cards in a row using Bootstrap’s grid system.

    ✅ Example: Card Columns

    html
    <div class="container">
    <div class="row">
    <div class="col-md-4">
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">This is the first card.</p>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">Card 2</h5>
    <p class="card-text">This is the second card.</p>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">Card 3</h5>
    <p class="card-text">This is the third card.</p>
    </div>
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • The three cards are displayed in a row on larger screens and stacked on small screens.

    🔹 3. Bootstrap Accordions

    Accordions create collapsible sections, perfect for FAQs and content toggles.

    1️⃣ Basic Accordion Structure

    ✅ Example: Simple Accordion

    html
    <div class="container">
    <div class="accordion" id="accordionExample">
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
    Accordion Item #1
    </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
    <div class="accordion-body">
    This is the content of the first accordion panel.
    </div>
    </div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • The first panel is expanded by default, and clicking toggles it.

    2️⃣ Multiple Accordion Items

    ✅ Example: Multi-Item Accordion

    html
    <div class="accordion" id="faqAccordion">
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
    Question 1
    </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
    <div class="accordion-body">Answer to Question 1.</div>
    </div>
    </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
    Question 2
    </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
    <div class="accordion-body">Answer to Question 2.</div>
    </div>
    </div>
    </div>

    🔹 What happens?

    • Each accordion collapses when another is opened, creating an FAQ-style effect.

    🔹 4. Bootstrap Progress Bars

    Progress bars visually indicate task completion or loading progress.

    1️⃣ Basic Progress Bar

    ✅ Example: Simple Progress Bar

    html
    <div class="container">
    <div class="progress">
    <div class="progress-bar" style="width: 50%;">50%</div>
    </div>
    </div>

    🔹 What happens?

    • A progress bar fills up 50% of its width.

    2️⃣ Colored Progress Bars

    ✅ Example: Adding Color

    html
    <div class="progress">
    <div class="progress-bar bg-success" style="width: 75%;">75%</div>
    </div>

    🔹 What happens?

    • The progress bar turns green (bg-success).

    3️⃣ Striped & Animated Progress Bars

    ✅ Example: Striped & Animated Progress Bar

    html
    <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 60%;">Loading...</div>
    </div>

    🔹 What happens?

    • The progress bar animates while filling up.

    📝 Lesson Recap Quiz

    🎯 Test your understanding of Bootstrap Cards, Accordions & Progress Bars.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class is used to create a Bootstrap card?
    a) .bootstrap-card
    b) .card
    c) .card-container
    d) .box

    ✅ Correct Answer: b) .card

    2️⃣ What attribute makes an accordion collapse when another opens?
    a) data-bs-close
    b) data-bs-toggle="collapse"
    c) data-bs-parent="#accordionExample"
    d) data-bs-accordion

    ✅ Correct Answer: c) data-bs-parent="#accordionExample"

    3️⃣ How can you animate a Bootstrap progress bar?
    a) .progress-animate
    b) .progress-bar-moving
    c) .progress-bar-striped progress-bar-animated
    d) .progress-speed

    ✅ Correct Answer: c) .progress-bar-striped progress-bar-animated

    📌 True or False

    4️⃣ Bootstrap cards can contain images, text, and buttons.
    ✅ Answer: True

    5️⃣ The .progress-bar class is required to display a progress bar.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a card with an image, title, and button.
    ✅ Build an FAQ section using an accordion.
    ✅ Create a striped animated progress bar at 80%.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Cards (.card) structure content with images, text, and buttons.
    ✅ Accordions (.accordion) create collapsible sections.
    ✅ Progress bars (.progress-bar) visually represent loading and completion status.

  • Lesson 11: Forms & Form Validation 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 styled forms using Bootstrap and implement built-in form validation for user input.

    🔹 1. Introduction to Bootstrap Forms

    Forms are essential for user input, authentication, and data submission. Bootstrap provides pre-styled form controls, labels, and validation features.

    💡 Why Use Bootstrap Forms?
    ✔️ Pre-styled form fields that look consistent across browsers.
    ✔️ Built-in validation classes for error handling.
    ✔️ Easily customizable using Bootstrap’s grid system.

    🔹 2. Bootstrap Form Basics

    Forms in Bootstrap are built using the <form> element and various input fields.

    ✅ Example: Basic Form

    html
    <div class="container">
    <form>
    <div class="mb-3">
    <label for="name" class="form-label">Full Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
    </div>
    <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>

    🔹 What happens?

    • The form fields automatically get spacing and styling using .form-control.

    🔹 3. Bootstrap Form Layouts

    1️⃣ Inline Forms

    Inline forms display inputs next to each other instead of stacking them.

    ✅ Example: Inline Form

    html
    <form class="row g-3">
    <div class="col-auto">
    <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="col-auto">
    <button type="submit" class="btn btn-success">Search</button>
    </div>
    </form>

    🔹 What happens?

    • The form fields appear in one row instead of stacking.

    2️⃣ Horizontal Form Layout

    Use Bootstrap’s grid system to create a horizontal form.

    ✅ Example: Horizontal Form

    html
    <div class="container">
    <form>
    <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
    <input type="email" class="form-control" id="email">
    </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>

    🔹 What happens?

    • The label is in one column and the input field is in another.

    🔹 4. Bootstrap Form Controls

    1️⃣ Input Types

    Bootstrap supports various input types such as text, password, email, number, date, and file.

    ✅ Example: Input Types

    html
    <input type="password" class="form-control" placeholder="Enter your password">
    <input type="number" class="form-control" placeholder="Enter a number">
    <input type="date" class="form-control">
    <input type="file" class="form-control">

    2️⃣ Floating Labels

    Floating labels move above the input field when users type.

    ✅ Example: Floating Labels

    html
    <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
    <label for="floatingEmail">Email address</label>
    </div>

    🔹 What happens?

    • The label floats above the input field when clicked.

    3️⃣ Select Dropdowns

    Use .form-select to create a styled dropdown menu.

    ✅ Example: Select Dropdown

    html
    <select class="form-select">
    <option selected>Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    </select>

    🔹 What happens?

    • A styled dropdown menu appears.

    4️⃣ Checkboxes & Radio Buttons

    Use .form-check for checkboxes and radio buttons.

    ✅ Example: Checkboxes & Radios

    html
    <div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox">
    <label class="form-check-label" for="checkbox">Check this box</label>
    </div>

    <div class="form-check">
    <input type="radio" class="form-check-input" name="radio" id="radio1">
    <label class="form-check-label" for="radio1">Option 1</label>
    </div>

    🔹 What happens?

    • The checkbox and radio buttons are styled properly.

    🔹 5. Bootstrap Form Validation

    1️⃣ Client-Side Validation

    Bootstrap provides built-in validation for form fields.

    ✅ Example: Form Validation

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

    🔹 What happens?

    • If the field is empty, an error message appears.
    • .invalid-feedback shows validation messages.

    2️⃣ JavaScript-Powered Validation

    You can add JavaScript validation to enhance error handling.

    ✅ Example: JavaScript Form Validation

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

    🔹 What happens?

    • The script prevents form submission if fields are empty.
    • Adds Bootstrap’s validation classes dynamically.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap forms.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ Which class is used for a Bootstrap-styled input field?
    a) .input-field
    b) .form-control
    c) .form-input
    d) .bootstrap-input

    ✅ Correct Answer: b) .form-control

    2️⃣ What class is used for a Bootstrap dropdown select menu?
    a) .form-dropdown
    b) .form-select
    c) .select-menu
    d) .dropdown-control

    ✅ Correct Answer: b) .form-select

    3️⃣ Which Bootstrap class is used for validation error messages?
    a) .form-error
    b) .alert-warning
    c) .invalid-feedback
    d) .form-danger

    ✅ Correct Answer: c) .invalid-feedback

    📌 True or False

    4️⃣ Bootstrap supports floating labels inside form fields.
    ✅ Answer: True

    5️⃣ .form-group is required to use Bootstrap forms.
    ✅ Answer: False (It is optional.)

    🎯 Practical Challenge

    ✅ Create a Bootstrap form with:

    • Floating labels
    • Styled checkboxes & radio buttons
    • A dropdown select field
      ✅ Implement Bootstrap validation with error messages.
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap forms (.form-control) provide consistent styling for input fields.
    ✅ Floating labels create modern UI forms.
    ✅ Form validation (.invalid-feedback) prevents incorrect user input.
    ✅ Bootstrap supports checkboxes, radio buttons, and dropdowns.