{"id":10585,"library":"bootstrap.native","title":"Bootstrap.Native Components","description":"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.","status":"active","version":"5.1.10","language":"javascript","source_language":"en","source_url":"https://github.com/thednp/bootstrap.native","tags":["javascript","twitter-bootstrap","bootstrap","native","typescript"],"install":[{"cmd":"npm install bootstrap.native","lang":"bash","label":"npm"},{"cmd":"yarn add bootstrap.native","lang":"bash","label":"yarn"},{"cmd":"pnpm add bootstrap.native","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const Alert = require('bootstrap.native').Alert;","symbol":"Alert","correct":"import { Alert } from 'bootstrap.native';"},{"note":"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.","wrong":"const myModal = new bootstrap.Modal(element);","symbol":"Modal","correct":"import { Modal } from 'bootstrap.native';"},{"note":"Since v4.1.0, component instances are retrieved via the static `getInstance` method on the component class, not directly from the DOM element.","wrong":"element.Alert;","symbol":"getInstance","correct":"import { Alert } from 'bootstrap.native'; Alert.getInstance(element);"}],"quickstart":{"code":"import { Modal } from 'bootstrap.native';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const modalElement = document.getElementById('myModal');\n if (modalElement) {\n const myModal = new Modal(modalElement, { keyboard: true, backdrop: true });\n\n // Example: Show the modal after a short delay\n setTimeout(() => {\n myModal.show();\n console.log('Modal shown!');\n }, 1000);\n\n // Example: Add an event listener for when the modal is hidden\n modalElement.addEventListener('hidden.bs.modal', () => {\n console.log('Modal hidden!');\n });\n } else {\n console.error('Modal element with ID \"myModal\" not found.');\n }\n});\n\n// Basic HTML structure for the modal (add this to your index.html)\n/*\n
\n
\n
\n
\n
Hello from Bootstrap.Native
\n \n
\n
\n This is a modal powered by bootstrap.native, without jQuery or Popper.js!\n
\n
\n \n \n
\n
\n
\n
\n*/","lang":"typescript","description":"This quickstart demonstrates how to import and programmatically control a Bootstrap Modal component using `bootstrap.native` after the DOM is fully loaded."},"warnings":[{"fix":"Migrate all imports to ES Module (ESM) syntax using `import { Component } from 'bootstrap.native';`","message":"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.","severity":"breaking","affected_versions":">=5.1.7"},{"fix":"Use the static `getInstance` method on the component class instead, for example: `Alert.getInstance(myAlertElement)`.","message":"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`).","severity":"breaking","affected_versions":">=4.1.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Remove the `container` option from your Tooltip and Popover configurations and adjust CSS if necessary to manage their positioning and z-index.","message":"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.","severity":"deprecated","affected_versions":">=5.0.0-alpha1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use the static `getInstance` method on the component class: `import { Alert } from 'bootstrap.native'; const myAlert = Alert.getInstance(myElement);`","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.","error":"TypeError: myElement.Alert is not a function"},{"fix":"Update your import statements to use ES Modules: `import { Modal } from 'bootstrap.native';`","cause":"Using CommonJS `require()` syntax in an ES Module environment after `bootstrap.native` v5.1.7 removed direct CJS packaging.","error":"SyntaxError: require is not defined"},{"fix":"Ensure component initialization code runs after the `DOMContentLoaded` event, or within a script tag placed at the end of the ``.","cause":"Attempting to initialize components before the DOM is fully loaded or the specific element exists in the DOM.","error":"Component not functioning or element not found (e.g., Modal fails to open, Tooltip not appearing)"}],"ecosystem":"npm"}