Lesson 23: Using Bootstrap’s JavaScript Plugins

—

by

admin
in
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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *