bootstrap

library0.0.1jsnpmunverified

Bootstrap is a widely adopted, open-source front-end framework designed for building responsive, mobile-first web projects. It provides a comprehensive collection of HTML, CSS, and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. The current stable version is 5.3.8. Bootstrap maintains a regular release cadence with frequent patch and minor updates, while major versions like v5 introduce significant architectural changes, such as the removal of its jQuery dependency. Its key differentiators include extensive documentation, a robust grid system, and a vast ecosystem of themes and plugins, making it a popular choice for rapid development and consistent UI/UX across various devices. It offers pre-compiled CSS and JS distributions, as well as Sass source files for extensive customization.

web-framework

npm install bootstrap

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BOOTSTRAP

bootstrap

web-frameworkjavascriptv0.0.1

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.

CSS

✓ import 'bootstrap/dist/css/bootstrap.min.css';

For styling; import in your main JavaScript or TypeScript entry file, or link via HTML. For custom Sass builds, import `bootstrap/scss/bootstrap.scss`.

Modal, Dropdown, Tooltip, Popover (JavaScript components)

✓ import { Modal, Dropdown, Tooltip, Popover } from 'bootstrap';

✗ const { Modal } = require('bootstrap');

Bootstrap 5 primarily uses ES Modules. Named imports are preferred for individual components. The CommonJS `require` syntax is generally discouraged in modern setups. Ensure `@popperjs/core` is installed for these components to work correctly.

Full Bundle JavaScript

✓ import 'bootstrap';

✗ import * as bootstrap from 'bootstrap';

Imports the full Bootstrap JavaScript bundle, attaching components to the global `window.bootstrap` object. While convenient, it leads to larger bundle sizes. Prefer named imports for specific components to optimize.

TypeScript Types

✓ import type { ModalOptions } from 'bootstrap';

Bootstrap ships with its own TypeScript declaration files, allowing type-safe usage of component options and methods.

Demonstrates how to import and initialize Bootstrap's JavaScript components, specifically a Modal and a Tooltip, after the DOM has loaded.

import { Modal, Tooltip } from 'bootstrap'; // Ensure DOM is fully loaded before initializing components document.addEventListener('DOMContentLoaded', () => { // Example: Initialize a Modal component const myModalElement = document.getElementById('myModal'); if (myModalElement) { const myModal = new Modal(myModalElement, { backdrop: true, // Example option keyboard: true }); // You might show the modal based on some event or initial state: // myModal.show(); } // Example: Initialize all tooltips on the page const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl)); console.log('Bootstrap Modal and Tooltip components initialized.'); }); /* HTML Context for the above JavaScript: <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Launch demo modal </button> <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">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 Bootstrap modal. </div> </div> </div> </div> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Hover for Tooltip </button> */

Debug

Known issues

breakingBootstrap 5 removed its dependency on jQuery. All JavaScript components now operate on pure JavaScript. Migrating from Bootstrap 4 requires rewriting any custom JavaScript that relied on jQuery for component initialization or manipulation.

fix

Review the official Bootstrap 5 migration guide. Update JavaScript to use native DOM methods and Bootstrap's new JavaScript API (e.g., `new Modal(element)` instead of `$(element).modal()`).

affects: >=5.0.0

gotchaMissing `@popperjs/core` peer dependency will cause Bootstrap JavaScript components like tooltips, popovers, dropdowns, and modals to fail or throw errors related to positioning.

fix

Install `@popperjs/core`: `npm install @popperjs/core` or `yarn add @popperjs/core`.

affects: >=5.0.0

deprecatedPassing percentage units to the global `abs()` function in Sass is deprecated with Dart Sass v1.65.0 onwards, leading to deprecation warnings during compilation. Bootstrap internally addressed this, but custom Sass setups might still encounter it.

fix

Update Dart Sass to a newer version that correctly handles this or adjust custom Sass functions to avoid passing percentage units to `abs()` directly. Bootstrap v6 aims to drop `node-sass` support, favoring Dart Sass.

affects: >=5.3.2

gotchaThe Bootstrap Sass variable `$color-mode-type` for managing dark mode compilation was re-evaluated. If you were manually importing `_variables-dark.scss`, keep doing so as this pattern is expected for v6. Bootstrap 5.3.3 fixed an issue where `_variables.scss` *wasn't* automatically importing `_variables-dark.scss`, which previously caused breaking changes in Sass builds.

fix

If experiencing color mode issues with custom Sass, ensure your Sass setup correctly handles `_variables.scss` and `_variables-dark.scss`. For future compatibility (v6), explicit import of `_variables-dark.scss` might be required for advanced custom dark mode setups.

affects: >=5.3.3

gotchaChanges to default dark mode colors (e.g., `$gray-500` replaced with `$gray-300` for body text) in v5.3.1 might affect existing custom dark mode themes, potentially requiring adjustments to maintain desired contrast and aesthetics.

fix

Review your custom dark mode styling and adjust Sass variables or CSS rules as needed to align with the new default color contrast ratios.

affects: >=5.3.1

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'fn') at bootstrap.min.js

This error typically indicates that jQuery is missing or not loaded before Bootstrap's JavaScript (common in Bootstrap 4 projects). For Bootstrap 5, it might mean an older version of Bootstrap is being used or there's a conflict with a legacy script expecting jQuery.

fix

For Bootstrap 5, ensure jQuery is *not* being used or loaded with Bootstrap's JavaScript. If migrating from Bootstrap 4, remove jQuery dependencies and update JavaScript initialization to Bootstrap 5's vanilla JS API.

Error: Bootstrap's dropdowns require Popper (https://popper.js.org)

Bootstrap's JavaScript components (Dropdown, Tooltip, Popover, Modal) rely on Popper.js for correct positioning and functionality, but `@popperjs/core` is either not installed or not correctly integrated into the build.

fix

Install the peer dependency: `npm install @popperjs/core`. Ensure your bundler includes it, or if using direct script tags, include `popper.min.js` before `bootstrap.min.js`.

Error: Dart Sass 1.65.0 deprecated passing a percentage unit to the global `abs()` function. This will be an error in Dart Sass 2.0.0. Consider using `math.abs()` instead.

Compiling Bootstrap's Sass files with Dart Sass v1.65.0 or higher triggers a deprecation warning related to the `abs()` function usage.

fix

While Bootstrap 5.3.2 and later addressed this internally for its own compilation, custom Sass code or older Bootstrap versions might still show this. Update to the latest Bootstrap 5.x.x, and ensure your custom Sass code adheres to modern Dart Sass practices, potentially using `math.abs()` if applicable.

Bootstrap component (e.g., Modal, Dropdown) not working with `data-bs-*` attributes.

The Bootstrap JavaScript bundle (or individual component JavaScript) was not loaded or initialized correctly on the page, or there's a conflict with other JavaScript.

fix

Verify that `bootstrap.min.js` (or `import 'bootstrap'`) is included and executed. Ensure your JavaScript is loaded *after* the DOM content is available (`DOMContentLoaded` event listener). Check the browser console for JavaScript errors that might prevent Bootstrap from initializing.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

@popperjs/corerequiredRequired for JavaScript components like tooltips, popovers, dropdowns, and modals to function correctly, particularly for their positioning engine.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/twbs/bootstrap ↗

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

homepagehttps://getbootstrap.com ↗