BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap Programmatically: Simple Guide

You can use Bootstrap programmatically by controlling its components with JavaScript through the Bootstrap JavaScript API. This lets you show, hide, or toggle components like modals, tooltips, and dropdowns using new bootstrap.Component(element) and calling methods on it.

📐

Syntax

Bootstrap components can be controlled programmatically by creating a new instance of the component's JavaScript class and calling its methods.

const instance = new bootstrap.Component(element, options); creates a new component instance.
element is the DOM element for the Bootstrap component.
options is an optional object to customize behavior.
Use methods like show(), hide(), or toggle() on the instance to control the component.

javascript

const modalElement = document.getElementById('myModal');
const modal = new bootstrap.Modal(modalElement, { keyboard: false });
modal.show();

💻

Example

This example shows how to programmatically open and close a Bootstrap modal using 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 Programmatic Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <button id="openBtn" class="btn btn-primary">Open Modal</button>
  <button id="closeBtn" class="btn btn-secondary">Close Modal</button>

  <div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Programmatic Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>This modal is controlled by JavaScript.</p>
        </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('myModal');
    const modal = new bootstrap.Modal(modalElement);

    document.getElementById('openBtn').addEventListener('click', () => {
      modal.show();
    });

    document.getElementById('closeBtn').addEventListener('click', () => {
      modal.hide();
    });
  </script>
</body>
</html>

Output

A webpage with two buttons: 'Open Modal' and 'Close Modal'. Clicking 'Open Modal' shows a popup modal with a title and message. Clicking 'Close Modal' hides the modal.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap programmatically include:

Not including Bootstrap's JavaScript bundle, so component methods don't work.
Trying to create a component instance on an element that doesn't exist or is not a Bootstrap component.
Calling methods before the DOM is fully loaded.
Confusing jQuery-based Bootstrap 4 code with Bootstrap 5's vanilla JavaScript API.

javascript

/* Wrong: Missing Bootstrap JS, so modal.show() fails */
const modalElement = document.getElementById('myModal');
const modal = new bootstrap.Modal(modalElement);
modal.show();

/* Right: Include Bootstrap JS bundle before using */
// <script src="bootstrap.bundle.min.js"></script>
// Then create instance and call methods

📊

Quick Reference

Here are common Bootstrap components and their programmatic methods:

Component	Create Instance	Common Methods
Modal	new bootstrap.Modal(element, options)	show(), hide(), toggle()
Tooltip	new bootstrap.Tooltip(element, options)	show(), hide(), toggle()
Dropdown	new bootstrap.Dropdown(element, options)	show(), hide(), toggle()
Collapse	new bootstrap.Collapse(element, options)	show(), hide(), toggle()
Popover	new bootstrap.Popover(element, options)	show(), hide(), toggle()

✅

Key Takeaways

Use Bootstrap's JavaScript API by creating component instances with new bootstrap.Component(element).

Always include Bootstrap's JavaScript bundle to enable programmatic control.

Call component methods like show() and hide() to control UI elements dynamically.

Ensure the DOM is fully loaded before accessing Bootstrap components programmatically.

Bootstrap 5 uses vanilla JavaScript, so avoid jQuery-based Bootstrap 4 code patterns.