BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap JavaScript: Simple Guide for Beginners

To use Bootstrap JavaScript, include the Bootstrap JS and its dependency Popper.js in your HTML after loading Bootstrap CSS. Then, use Bootstrap's data attributes or JavaScript API to activate components like modals, dropdowns, or tooltips.

📐

Syntax

Bootstrap JavaScript requires including two main files: bootstrap.bundle.min.js which contains Bootstrap's JS and Popper.js for positioning. You can activate components using HTML data-bs-* attributes or by calling Bootstrap's JavaScript methods.

Include JS: Add <script src="bootstrap.bundle.min.js"></script> before closing </body>.
Data attributes: Use attributes like data-bs-toggle to enable components without extra JS code.
JS API: Use JavaScript to create or control components, e.g., new bootstrap.Modal(element).

html

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

<!-- Include Bootstrap Bundle JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Example: Button with data attribute to toggle modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

💻

Example

This example shows a button that opens a modal window using Bootstrap JavaScript. The modal is triggered by data-bs-toggle and data-bs-target attributes without writing extra JavaScript code.

html

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

  <!-- Button to open modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Open Modal
  </button>

  <!-- Modal structure -->
  <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 is a simple Bootstrap modal powered by JavaScript.
        </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 'Open Modal'. Clicking it opens a popup window with title 'Modal Title', some text, and a close button.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap JavaScript include:

Not including bootstrap.bundle.min.js which contains Popper.js needed for dropdowns and tooltips.
Loading Bootstrap JS before the HTML elements it controls, causing errors.
Using old data-toggle attributes instead of the updated data-bs-toggle in Bootstrap 5.
Forgetting to add required ARIA attributes for accessibility.

html

<!-- Wrong: Missing Popper.js or using separate files incorrectly -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<!-- Right: Use bootstrap.bundle.min.js which includes Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

📊

Quick Reference

Here is a quick summary to use Bootstrap JavaScript effectively:

Step	Description
1	Include Bootstrap CSS in .
2	Include `bootstrap.bundle.min.js` before .
3	Use `data-bs-toggle` and `data-bs-target` attributes to activate components.
4	Or use JavaScript API like `new bootstrap.Modal(element)` for manual control.
5	Ensure ARIA attributes for accessibility are present.

✅

Key Takeaways

Always include bootstrap.bundle.min.js to get Bootstrap JS and Popper.js together.

Use data-bs-* attributes to activate components without writing extra JavaScript.

Load JavaScript files after the HTML elements they control to avoid errors.

Bootstrap 5 uses data-bs-toggle instead of data-toggle for JavaScript components.

Add ARIA attributes to keep your components accessible to all users.