Registry / web-framework / bootstrap.native

bootstrap.native

library5.1.10jsnpmunverified

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.

web-framework

npm install bootstrap.native

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BOOTSTRAP.NATIVE

bootstrap.native

web-frameworkjavascriptv5.1.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Alert

✓ import { Alert } from 'bootstrap.native';

✗ const Alert = require('bootstrap.native').Alert;

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

✓ import { Modal } from 'bootstrap.native';

✗ const myModal = new bootstrap.Modal(element);

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

✓ import { Alert } from 'bootstrap.native'; Alert.getInstance(element);

✗ element.Alert;

Since v4.1.0, component instances are retrieved via the static `getInstance` method on the component class, not directly from the DOM element.

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> */

Debug

Known issues

breakingStarting 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';`

affects: >=5.1.7

breakingThe 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)`.

affects: >=4.1.0

breakingWith 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.

affects: >=4.0.0

deprecatedThe `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.

affects: >=5.0.0-alpha1

Errors

Common errors & fixes

TypeError: myElement.Alert is not a function

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

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)

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>`.

Upgrade

Version history

5.1.10latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/thednp/bootstrap.native ↗

packagehttps://www.npmjs.com/package/bootstrap.native ↗

homepagehttps://thednp.github.io/bootstrap.native/ ↗