BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap Without jQuery: Simple Guide

Bootstrap 5 and later versions do not require jQuery because they use native JavaScript for interactive components. To use Bootstrap without jQuery, include only the Bootstrap CSS and Bootstrap's JavaScript bundle which uses vanilla JavaScript.

📐

Syntax

To use Bootstrap without jQuery, include the Bootstrap CSS and the Bootstrap JavaScript bundle that contains all necessary plugins written in vanilla JavaScript.

The basic syntax includes:

<link> tag for Bootstrap CSS
<script> tag for Bootstrap's JavaScript bundle

No need to include jQuery or Popper.js separately as Bootstrap 5 bundles Popper internally.

html

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

  <!-- Your Bootstrap HTML here -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

💻

Example

This example shows a Bootstrap 5 modal working without jQuery. The modal opens when you click the button, using Bootstrap's native JavaScript.

html

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

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Modal
  </button>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          This modal works without jQuery.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue button labeled 'Launch Modal'. Clicking it opens a modal window with a title, body text, and close buttons, all working without jQuery.

⚠️

Common Pitfalls

Many developers try to include jQuery with Bootstrap 5, but it is unnecessary and can cause conflicts. Also, using older Bootstrap versions (like 4 or below) requires jQuery, so make sure you use Bootstrap 5 or later.

Another common mistake is forgetting to include the bootstrap.bundle.min.js which contains Popper and Bootstrap's JavaScript plugins. Including only bootstrap.min.js without Popper will break components like dropdowns and tooltips.

html

<!-- Wrong way: Including jQuery with Bootstrap 5 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

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

📊

Quick Reference

Bootstrap 5 without jQuery:

Use bootstrap.bundle.min.js for JavaScript plugins and Popper included.
Do not include jQuery or separate Popper.js.
Use data attributes like data-bs-toggle and data-bs-target for components.
Ensure you use Bootstrap 5 or newer.

✅

Key Takeaways

Bootstrap 5 uses vanilla JavaScript and does not require jQuery.

Include only bootstrap.bundle.min.js to get all JS plugins and Popper together.

Avoid adding jQuery to Bootstrap 5 projects to prevent conflicts.

Use data-bs- attributes for Bootstrap components to work without jQuery.

Bootstrap versions before 5 require jQuery; upgrade to use jQuery-free Bootstrap.