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.

<!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:

<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

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

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):

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

@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. 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:

import * as bootstrap from 'bootstrap'

Or import only what you need for automatic tree-shaking:

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().