bootstrap-vite

# Bootstrap 6 with Vite Set up a Bootstrap 6 project bundled with Vite. Requires Node.js and terminal familiarity. ## Workflow - [ ] Step 1: Set up npm and install dependencies - [ ] Step 2: Create the project structure - [ ] Step 3: Configure Vite - [ ] Step 4: Import Bootstrap's CSS and JS - [ ] Step 5: Verify --- ## Step 1: Set up npm and install dependencies 1. Create the project and initialize npm: ```sh mkdir my-project && cd my-project npm init -y ``` 2. Install Vite: ```sh npm i --save-dev vite ``` 3. Install Bootstrap and its optional peer dependencies (omit `@floating-ui/dom` if not using menus/popovers/tooltips; omit `vanilla-calendar-pro` if not using the datepicker): ```sh npm i --save bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro ``` 4. Install Sass to compile Bootstrap's source: ```sh npm i --save-dev sass ``` --- ## Step 2: Create the project structure ```sh mkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js ``` Target layout: ```text my-project/ ├── src/ │ ├── js/ │ │ └── main.js │ ├── scss/ │ │ └── styles.scss │ └── index.html ├── package-lock.json ├── package.json └── vite.config.js ``` --- ## Step 3: Configure Vite 1. `vite.config.js`: ```js import path from 'path' export default { root: path.resolve(__dirname, 'src'), build: { outDir: '../dist' }, server: { port: 8080 } } ``` 2. `src/index.html` — load the entry module: ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Vite</title> <script type="module" src="./js/main.js"></script> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Vite!</h1> <button class="btn-solid theme-primary">Primary button</button> </div> </body> </html> ``` 3. `package.json` — add the start script: ```json { "scripts": { "start": "vite", "test": "echo \"Error: no test specified\" && exit 1" } } ``` 4. Start Vite: ```sh npm start ``` --- ## Step 4: Import Bootstrap's CSS and JS 1. `src/scss/styles.scss` — import the source Sass with `@use` (never `@import`): ```scss // Import all of Bootstrap's CSS @use "bootstrap/scss/bootstrap"; ``` To customize, override Bootstrap's CSS token maps (`$root-tokens`, `$*-tokens`) — see [Customize › Sass](https://getbootstrap.com/docs/6.0/customize/sass/#compile-time-overrides). Token names are written unprefixed in Sass; Bootstrap's dist/CDN CSS adds the `--bs-` prefix via PostCSS, so compiling the source yourself keeps them unprefixed. 2. `src/js/main.js` — load the CSS and import Bootstrap's JS. Floating UI and Vanilla Calendar Pro are imported automatically through Bootstrap: ```js // Import our custom CSS, then all of Bootstrap’s JS import '../scss/styles.scss' import * as bootstrap from 'bootstrap' ``` Import only the plugins you need to keep bundle sizes down: ```js import { Tooltip, Toast, Popover } from 'bootstrap' ``` --- ## Step 5: Verify 1. Run `npm start` and open `http://localhost:8080` — the `.container` and `.btn-solid.theme-primary` button should be styled. 2. Confirm the browser console is free of module-resolution errors (Bootstrap, Floating UI, Vanilla Calendar Pro). 3. Trigger a JS component (tooltip/dialog) to confirm the JS bundle works. 4. Bootstrap 6 requires a browser that supports `oklch()` and `color-mix()`. For an optimized build that imports only the parts of Bootstrap you use, see the [twbs/examples Vite project](https://github.com/twbs/examples/tree/main/vite).