{"id":10583,"library":"bootstrap","title":"Bootstrap","description":"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.","status":"active","version":"5.3.8","language":"javascript","source_language":"en","source_url":"https://github.com/twbs/bootstrap","tags":["javascript","css","sass","mobile-first","responsive","front-end","framework","web"],"install":[{"cmd":"npm install bootstrap","lang":"bash","label":"npm"},{"cmd":"yarn add bootstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add bootstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for JavaScript components like tooltips, popovers, dropdowns, and modals to function correctly, particularly for their positioning engine.","package":"@popperjs/core","optional":false}],"imports":[{"note":"For styling; import in your main JavaScript or TypeScript entry file, or link via HTML. For custom Sass builds, import `bootstrap/scss/bootstrap.scss`.","symbol":"CSS","correct":"import 'bootstrap/dist/css/bootstrap.min.css';"},{"note":"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.","wrong":"const { Modal } = require('bootstrap');","symbol":"Modal, Dropdown, Tooltip, Popover (JavaScript components)","correct":"import { Modal, Dropdown, Tooltip, Popover } from 'bootstrap';"},{"note":"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.","wrong":"import * as bootstrap from 'bootstrap';","symbol":"Full Bundle JavaScript","correct":"import 'bootstrap';"},{"note":"Bootstrap ships with its own TypeScript declaration files, allowing type-safe usage of component options and methods.","symbol":"TypeScript Types","correct":"import type { ModalOptions } from 'bootstrap';"}],"quickstart":{"code":"import { Modal, Tooltip } from 'bootstrap';\n\n// Ensure DOM is fully loaded before initializing components\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Example: Initialize a Modal component\n  const myModalElement = document.getElementById('myModal');\n  if (myModalElement) {\n    const myModal = new Modal(myModalElement, {\n      backdrop: true, // Example option\n      keyboard: true\n    });\n    // You might show the modal based on some event or initial state:\n    // myModal.show();\n  }\n\n  // Example: Initialize all tooltips on the page\n  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle=\"tooltip\"]');\n  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl));\n\n  console.log('Bootstrap Modal and Tooltip components initialized.');\n});\n\n/*\nHTML Context for the above JavaScript:\n<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Launch demo modal\n</button>\n\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\" id=\"myModalLabel\">Modal title</h5>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        This is a Bootstrap modal.\n      </div>\n    </div>\n  </div>\n</div>\n\n<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\">\n  Hover for Tooltip\n</button>\n*/","lang":"typescript","description":"Demonstrates how to import and initialize Bootstrap's JavaScript components, specifically a Modal and a Tooltip, after the DOM has loaded."},"warnings":[{"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()`).","message":"Bootstrap 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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Install `@popperjs/core`: `npm install @popperjs/core` or `yarn add @popperjs/core`.","message":"Missing `@popperjs/core` peer dependency will cause Bootstrap JavaScript components like tooltips, popovers, dropdowns, and modals to fail or throw errors related to positioning.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"Passing 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.","severity":"deprecated","affected_versions":">=5.3.2"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=5.3.3"},{"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.","message":"Changes 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.","severity":"gotcha","affected_versions":">=5.3.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'fn') at bootstrap.min.js"},{"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`.","cause":"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.","error":"Error: Bootstrap's dropdowns require Popper (https://popper.js.org)"},{"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.","cause":"Compiling Bootstrap's Sass files with Dart Sass v1.65.0 or higher triggers a deprecation warning related to the `abs()` function usage.","error":"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."},{"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.","cause":"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.","error":"Bootstrap component (e.g., Modal, Dropdown) not working with `data-bs-*` attributes."}],"ecosystem":"npm"}