Bootstrap.Native Components

5.1.10 · active · verified Sun Apr 19

bootstrap.native is a robust JavaScript library providing native, dependency-free implementations of Bootstrap 5 components. It serves as a lightweight and performant alternative to Bootstrap's official JavaScript, deliberately omitting external dependencies like jQuery and Popper.js. The current stable version is 5.1.10. The project maintains an active release cadence, with frequent updates addressing bugs, performance enhancements, and compatibility with the latest Bootstrap 5.x releases. Its key differentiators include a minimal footprint (approximately 13Kb gZipped), a codebase entirely sourced with TypeScript, and an emphasis on modern browser APIs such as `PositionObserver` and `ResizeObserver` for superior performance. The library supports integration via npm, bun, pnpm, and deno, providing broad compatibility across different development environments.

Common errors

```
TypeError: myElement.Alert is not a function
```
cause Attempting to initialize a component directly via a DOM element's property, which was the pattern in `bootstrap.native` versions prior to 4.1.0.

fix Use the static `getInstance` method on the component class: `import { Alert } from 'bootstrap.native'; const myAlert = Alert.getInstance(myElement);`
```
SyntaxError: require is not defined
```
cause Using CommonJS `require()` syntax in an ES Module environment after `bootstrap.native` v5.1.7 removed direct CJS packaging.

fix Update your import statements to use ES Modules: `import { Modal } from 'bootstrap.native';`
```
Component not functioning or element not found (e.g., Modal fails to open, Tooltip not appearing)
```
cause Attempting to initialize components before the DOM is fully loaded or the specific element exists in the DOM.

fix Ensure component initialization code runs after the `DOMContentLoaded` event, or within a script tag placed at the end of the `<body>`.

Warnings

breaking Starting from v5.1.7, CommonJS (CJS) packaging has been removed. Direct `require()` statements for `bootstrap.native` are no longer supported and will likely result in errors in environments without specific build tooling for CJS instrumentation.
Fix: Migrate all imports to ES Module (ESM) syntax using `import { Component } from 'bootstrap.native';`
breaking The method for obtaining component instances changed significantly in v4.1.0. Target DOM elements no longer directly host the component initialization object (e.g., `myAlertElement.Alert`).
Fix: Use the static `getInstance` method on the component class instead, for example: `Alert.getInstance(myAlertElement)`.
breaking With the release of v4.0.0, the `bootstrap.native` package officially moved to supporting Bootstrap 5. Legacy Bootstrap 4 specific sources and polyfills were removed in v4.2.0 and moved to a separate branch, meaning direct upgrades from v3.x or v4.x of `bootstrap.native` (which supported Bootstrap 4) to v4.0.0+ will require Bootstrap 5 CSS.
Fix: Ensure your project is using Bootstrap 5 CSS classes and structure. If you need Bootstrap 4 support, use older versions of `bootstrap.native` or consult the legacy branch.
deprecated The `container` option for Tooltip and Popover components was deprecated in version 5.0.0-alpha1. Relying on this option might lead to unexpected rendering or positioning issues.
Fix: Remove the `container` option from your Tooltip and Popover configurations and adjust CSS if necessary to manage their positioning and z-index.

Install

npm install bootstrap.native npm
yarn add bootstrap.native yarn
pnpm add bootstrap.native pnpm

Imports

Alert
wrong:
```
const Alert = require('bootstrap.native').Alert;
```
correct:
```
import { Alert } from 'bootstrap.native';
```
For module environments (ESM), named imports are the standard. CommonJS `require` syntax is deprecated since v5.1.7 for direct usage and relies on build tooling.
Modal
wrong:
```
const myModal = new bootstrap.Modal(element);
```
correct:
```
import { Modal } from 'bootstrap.native';
```
Components are imported by name. Direct `new` instantiation is common for other Bootstrap JS libraries, but `bootstrap.native` uses static methods or component class instantiation.
getInstance
wrong:
```
element.Alert;
```
correct:
```
import { Alert } from 'bootstrap.native'; Alert.getInstance(element);
```
Since v4.1.0, component instances are retrieved via the static `getInstance` method on the component class, not directly from the DOM element.

Quickstart

This quickstart demonstrates how to import and programmatically control a Bootstrap Modal component using `bootstrap.native` after the DOM is fully loaded.

import { Modal } from 'bootstrap.native';

document.addEventListener('DOMContentLoaded', () => {
  const modalElement = document.getElementById('myModal');
  if (modalElement) {
    const myModal = new Modal(modalElement, { keyboard: true, backdrop: true });

    // Example: Show the modal after a short delay
    setTimeout(() => {
      myModal.show();
      console.log('Modal shown!');
    }, 1000);

    // Example: Add an event listener for when the modal is hidden
    modalElement.addEventListener('hidden.bs.modal', () => {
      console.log('Modal hidden!');
    });
  } else {
    console.error('Modal element with ID "myModal" not found.');
  }
});

// Basic HTML structure for the modal (add this to your index.html)
/*
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Hello from Bootstrap.Native</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is a modal powered by bootstrap.native, without jQuery or Popper.js!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
*/

view raw JSON →