bootstrap-v6-install

# Add Bootstrap 6 to a Project This skill sets up Bootstrap 6 in a user's project. Pick the path that matches the project: **CDN** for the fastest start with no build step, or **package manager** (npm) for customizing Sass and bundling JS. For a full bundler-specific setup, use the dedicated `bootstrap-npm`, `bootstrap-vite`, `bootstrap-webpack`, or `bootstrap-parcel` skills instead. ## Workflow - [ ] Step 1: Choose an install path (CDN vs. package manager) - [ ] Step 2: Install Bootstrap and dependencies - [ ] Step 3: Include Bootstrap's CSS - [ ] Step 4: Include Bootstrap's JavaScript - [ ] Step 5: Verify --- ## Step 1: Choose an install path - **CDN** — no build step. Best for static pages, demos, and prototypes. Skip to the CDN section below. - **Package manager (npm)** — required to customize Bootstrap's Sass tokens or tree-shake JS. Requires Node.js and a Sass compiler. Continue with the npm section. Bootstrap 6 depends on two optional peer packages: - `@floating-ui/dom` — positioning for menus, popovers, and tooltips. Omit if you don't use them. - `vanilla-calendar-pro` — the datepicker. Omit if you don't use it. --- ## Step 2 & 3 (CDN): Include via CDN Add Bootstrap's CSS in `<head>` and the JS bundle before the closing `</body>`. The bundle includes Floating UI and Vanilla Calendar Pro. ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous"> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap!</h1> <button class="btn-solid theme-primary">Primary button</button> </div> <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script> </body> </html> ``` Copy the exact URLs and hashes from the Install docs when you use a different version. Never guess an SRI hash. The `crossorigin="anonymous"` attribute is required for SRI to work. To load Floating UI and Vanilla Calendar Pro separately (smaller payload), use the non-bundle JS with an import map: ```html <script type="importmap"> { "imports": { "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom/+esm", "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/+esm" } } </script> <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script> ``` For a CDN setup you're done — skip to **Step 5: Verify**. --- ## Step 2 (npm): Install ```sh npm install bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro ``` Bootstrap 6 requires a **Sass compiler** (Dart Sass) and **PostCSS/Autoprefixer** to match the official compiled output. Node Sass is not supported. Install the build tooling your setup needs, e.g.: ```sh npm install --save-dev sass autoprefixer postcss postcss-cli ``` ## Step 3 (npm): Include Bootstrap's CSS Import Bootstrap's source Sass with the modern `@use` rule (never `@import` — it's removed in Dart Sass and unsupported in v6): ```scss // Import all of Bootstrap's CSS @use "bootstrap/scss/bootstrap"; ``` Customize tokens with the `with ()` syntax. Only include the keys you want to change — Bootstrap merges overrides with its defaults: ```scss @use "bootstrap/scss/bootstrap" with ( $root-tokens: ( --border-radius: .25rem, --spacer: 1.5rem, ) ); ``` Override CSS custom properties through the token maps (`$root-tokens` and each component's `$*-tokens` map), following [Customize › Sass](https://getbootstrap.com/docs/6.0/customize/sass/#compile-time-overrides). Token names are written **unprefixed** in Sass (e.g. `--border-radius`, `--spacer`); Bootstrap's dist/CDN CSS runs PostCSS to add the `--bs-` prefix, so compiling the source yourself keeps them unprefixed. Compile the Sass to CSS with a `--load-path=node_modules` so `bootstrap` resolves, then run Autoprefixer via PostCSS. ## Step 4 (npm): Include Bootstrap's JavaScript Bootstrap 6 JavaScript is ESM-only. Import all plugins onto a `bootstrap` object: ```js import * as bootstrap from 'bootstrap' ``` Or import only what you need for automatic tree-shaking: ```js import { Tooltip, Toast, Popover } from 'bootstrap' ``` You can also import a single plugin directly from its file under `bootstrap/js/dist/`. Floating UI and Vanilla Calendar Pro are imported automatically through Bootstrap when a bundler is used. --- ## Step 5: Verify 1. Load the page (or run the dev server) and confirm the sample `.btn-solid.theme-primary` button and `.container` are styled — that proves Bootstrap's CSS is loaded. 2. Trigger a JS component (e.g. a tooltip or dialog) to confirm the JavaScript loaded without console errors. 3. For CDN setups, confirm the `integrity` hashes match the version you linked (mismatched hashes block the file from loading). 4. If Sass fails to compile, confirm you used `@use` (not `@import`) and passed `--load-path=node_modules`. 5. Bootstrap 6 requires a browser that supports `oklch()` and `color-mix()`.