BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap with Vanilla JS: Simple Guide

To use Bootstrap with vanilla JavaScript, include Bootstrap's CSS and JS files via CDN or local files in your HTML. Then, use Bootstrap's JavaScript components by calling their APIs directly with plain JS or by adding the required HTML markup and data attributes.

📐

Syntax

Bootstrap requires two main parts to work with vanilla JS:

CSS file: Styles the page with Bootstrap's design.
JavaScript file: Adds interactive features like modals, dropdowns, and tooltips.

You include these files in your HTML using <link> for CSS and <script> for JS. Then you can use Bootstrap components by adding specific HTML classes and attributes or by calling Bootstrap's JS classes in your own scripts.

html

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

  <!-- Your HTML content here -->

  <!-- Bootstrap JS Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Your custom JS -->
  <script>
    // Example: Initialize a Bootstrap tooltip
    const tooltipTrigger = document.querySelector('[data-bs-toggle="tooltip"]');
    if (tooltipTrigger) {
      const tooltip = new bootstrap.Tooltip(tooltipTrigger);
    }
  </script>
</body>
</html>

💻

Example

This example shows how to use Bootstrap's button and modal components with vanilla JavaScript. The modal opens when you click the button, using Bootstrap's JS API.

html

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

  <div class="container mt-5">
    <button id="openModalBtn" type="button" class="btn btn-primary">
      Open Modal
    </button>

    <!-- Modal HTML -->
    <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">Hello from Bootstrap</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            This modal is triggered using vanilla JavaScript.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const modalElement = document.getElementById('exampleModal');
    const modal = new bootstrap.Modal(modalElement);
    const openModalBtn = document.getElementById('openModalBtn');

    openModalBtn.addEventListener('click', () => {
      modal.show();
    });
  </script>
</body>
</html>

Output

A webpage with a blue 'Open Modal' button. Clicking it opens a popup modal with a title, message, and close buttons.

⚠️

Common Pitfalls

Some common mistakes when using Bootstrap with vanilla JS include:

Not including the Bootstrap JS file or including it before the HTML elements load.
Forgetting to include Popper.js (needed for dropdowns, tooltips, and popovers) — Bootstrap 5 bundle includes it automatically.
Trying to use jQuery-based Bootstrap 4 code with Bootstrap 5, which no longer depends on jQuery.
Not initializing components via JavaScript when required (some components need explicit JS initialization).

html

<!-- Wrong: Missing Bootstrap JS -->
<button data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

<!-- Right: Include Bootstrap JS and initialize tooltip -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const tooltipTrigger = document.querySelector('[data-bs-toggle="tooltip"]');
  if (tooltipTrigger) {
    new bootstrap.Tooltip(tooltipTrigger);
  }
</script>

📊

Quick Reference

Bootstrap with Vanilla JS Cheat Sheet:

Include CSS: <link href="bootstrap.min.css" rel="stylesheet">
Include JS Bundle: <script src="bootstrap.bundle.min.js"></script> (includes Popper)
Initialize components: new bootstrap.ComponentName(element)
Use data attributes: Add data-bs-toggle and others for automatic behavior
Listen to events: Use element.addEventListener('show.bs.modal', callback)

✅

Key Takeaways

Always include Bootstrap CSS and JS bundle files in your HTML to use Bootstrap with vanilla JS.

Use Bootstrap's JavaScript classes to initialize and control components programmatically.

Bootstrap 5 no longer requires jQuery; use plain JavaScript to interact with components.

Some components need explicit JS initialization, while others work with data attributes alone.

Include the JS bundle that contains Popper.js for full functionality of dropdowns and tooltips.