Using jQuery with Bootstrap 4 and 5

Introduction

Bootstrap is a powerful front-end framework widely used for developing responsive and mobile-first websites. It provides built-in components like modals, carousels, tooltips, popovers, and accordions, which rely on JavaScript for interactive functionality.

Although Bootstrap 5 has removed jQuery as a dependency in favor of vanilla JavaScript, developers still use jQuery to enhance Bootstrap components and extend their functionality. In this detailed guide, we will explore how to effectively use jQuery with both Bootstrap 4 and Bootstrap 5, covering various components and best practices.

1. Understanding the Role of jQuery in Bootstrap 4 and 5

Bootstrap 4 and jQuery

Bootstrap 4 requires jQuery for interactive components like modals, tooltips, carousels, and popovers.
It also relies on Popper.js for positioning elements like tooltips and dropdowns.
Developers use jQuery for DOM manipulation, event handling, animations, and AJAX calls.

Bootstrap 5 and jQuery

Bootstrap 5 removed jQuery as a dependency.
Interactive components now use vanilla JavaScript.
However, jQuery can still be used for additional functionality, backward compatibility, and easier DOM manipulation.

2. Setting Up jQuery with Bootstrap

Including jQuery in a Bootstrap 4 Project

You can include jQuery via a CDN or install it locally.

CDN Method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 with jQuery</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>

    <!-- Your Bootstrap content here -->

    <!-- jQuery (Required for Bootstrap 4) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Popper.js (Required for Bootstrap 4) -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Local Installation (Downloading jQuery)

Download jQuery from jQuery official website.
Link it in your project:

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Including jQuery in a Bootstrap 5 Project

Although Bootstrap 5 does not depend on jQuery, you can still add it manually.

CDN Method

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- jQuery (Optional) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

3. Enhancing Bootstrap Components with jQuery

3.1 Working with Bootstrap Modals

Bootstrap modals provide a way to display pop-up content. Let’s use jQuery to control modal behavior.

Basic Bootstrap Modal

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

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                This is a Bootstrap modal.
            </div>
        </div>
    </div>
</div>

Controlling Modal with jQuery

$(document).ready(function() {
    $("#openModal").click(function() {
        $("#myModal").modal('show'); // Open modal
    });

    $("#myModal").on('hidden.bs.modal', function() {
        alert("Modal closed");
    });
});

3.2 Enhancing Bootstrap Tooltips with jQuery

Tooltips require initialization when using them dynamically.

Basic Tooltip

<button id="tooltipBtn" class="btn btn-secondary" data-toggle="tooltip" title="This is a tooltip">Hover me</button>

Enable Tooltip with jQuery

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
});

3.3 Handling Bootstrap Accordions with jQuery

An accordion allows collapsing content panels.

Basic Accordion

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <a class="btn btn-link" data-toggle="collapse" href="#collapseOne">Accordion Item #1</a>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="card-body">Content for the first accordion.</div>
        </div>
    </div>
</div>

Toggle Accordion with jQuery

$(document).ready(function() {
    $(".btn-link").click(function() {
        $(this).toggleClass("active");
    });
});

3.4 Controlling Bootstrap Carousels with jQuery

Carousels display images in a sliding format.

Basic Carousel

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100">
        </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Control Carousel with jQuery

$(document).ready(function() {
    $("#myCarousel").carousel({ interval: 2000 });

    $(".carousel-control-prev").click(function() {
        $("#myCarousel").carousel("prev");
    });

    $(".carousel-control-next").click(function() {
        $("#myCarousel").carousel("next");
    });
});

4. Bootstrap 5 Without jQuery

Bootstrap 5 now supports pure JavaScript alternatives:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(item => {
    new bootstrap.Tooltip(item);
});

5. Best Practices When Using jQuery with Bootstrap

Always load jQuery before Bootstrap’s JavaScript files to avoid dependency issues.
Use jQuery only when necessary in Bootstrap 5 projects.
Initialize tooltips, modals, and other interactive elements using jQuery when required dynamically.
Optimize performance by minimizing unnecessary DOM manipulation.
Ensure backward compatibility for projects migrating from Bootstrap 4 to 5.

Even though Bootstrap 5 has moved away from jQuery, many projects still use jQuery for its simplicity and widespread use. This guide demonstrated how jQuery can enhance Bootstrap 4 and 5 functionalities, covering modals, tooltips, accordions, and carousels.

By following best practices, you can efficiently use jQuery with Bootstrap while ensuring compatibility, performance, and maintainability in your web projects.