software-development-company-logo

Tag: Lesson 23: Using Bootstrap’s JavaScript Plugins

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