Why use Vite with Bootstrap 5 instead of CDN?

Vite gives you Sass compilation (so you can override Bootstrap variables), tree-shaking unused Bootstrap JS components, hot module replacement during development and a production build that only includes what you use. CDN loads the full Bootstrap bundle with no customization.

Do I need PostCSS with Bootstrap 5 and Vite?

No. Bootstrap 5 uses Sass, not PostCSS. Vite handles Sass compilation natively when you install the sass package. You only need PostCSS if you're adding autoprefixer or other PostCSS plugins.

How do I import only specific Bootstrap JS components with Vite?

Import individual modules instead of the full bundle: import { Modal } from 'bootstrap'; import { Tooltip } from 'bootstrap'. This is tree-shakeable and reduces your final bundle size compared to importing the full bootstrap.bundle.min.js.

Bootstrap 5 with Vite — Complete Setup Guide (2026)

Vite is the right build tool for Bootstrap 5 projects in 2026. It's fast, simple and Bootstrap's Sass setup works perfectly with it. Here's the full setup from scratch.

Create a New Project

npm create vite@latest my-bootstrap-project
cd my-bootstrap-project

When prompted, choose Vanilla and JavaScript (or TypeScript if you prefer).

Install Dependencies

npm install bootstrap
npm install --save-dev sass

bootstrap — the Bootstrap 5 package. sass — needed for Sass compilation and Bootstrap variable overrides.

Project Structure

my-bootstrap-project/
├── src/
│   ├── main.js
│   └── styles/
│       └── main.scss
├── index.html
├── package.json
└── vite.config.js

Set Up Sass Entry File

Create src/styles/main.scss:

// 1. Override Bootstrap variables BEFORE import
$primary: #fd4766;
$secondary: #4f6ef7;
$font-family-base: 'Inter', system-ui, sans-serif;
$border-radius: 8px;
$border-radius-lg: 12px;
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

// 2. Import Bootstrap
@import "bootstrap/scss/bootstrap";

// 3. Your custom styles below
.btn-brand {
  background: $primary;
  border-color: $primary;
  color: #fff;

  &:hover {
    background: darken($primary, 8%);
    border-color: darken($primary, 8%);
    color: #fff;
  }
}

body {
  -webkit-font-smoothing: antialiased;
}

Set Up main.js

// src/main.js

// Import Sass (compiles Bootstrap + your overrides)
import './styles/main.scss'

// Import Bootstrap JS
// Option A: Full bundle (easiest — includes Popper.js)
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

// Option B: Individual components (smaller bundle)
// import { Modal, Tooltip, Dropdown, Collapse } from 'bootstrap'

Update index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 + Vite</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
    <div class="container">
      <a class="navbar-brand fw-bold" style="color:#fd4766;">MyApp</a>
    </div>
  </nav>

  <div class="container mt-5">
    <h1 class="display-5 fw-bold">Bootstrap 5 + Vite ⚡</h1>
    <p class="lead text-muted">Hot reload, Sass compilation and Bootstrap all working.</p>
    <button class="btn btn-primary me-2">Primary</button>
    <button class="btn btn-brand">Brand</button>
  </div>

  <script type="module" src="/src/main.js"></script>
</body>
</html>

Run the Dev Server

npm run dev

Open http://localhost:5173. You should see Bootstrap styles applied. Change a Sass variable in main.scss and the browser updates instantly — no page refresh.

Build for Production

npm run build

Vite produces a dist/ folder with minified CSS and JS. The final CSS will be much smaller than the full Bootstrap bundle if you've only imported what you need.

Import Only Specific Bootstrap Components

For the smallest possible production bundle, import Bootstrap Sass partials individually:

// src/styles/main.scss — import only what you use

// Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

// Optional — only import what your project uses
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/utilities/api";

This cuts the CSS significantly — no carousel, accordion, offcanvas or components you're not using.

TypeScript Setup

If you chose TypeScript, Bootstrap ships with types:

// src/main.ts
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import { Modal } from 'bootstrap'

const modalEl = document.getElementById('myModal')
if (modalEl) {
  const modal = new Modal(modalEl)
  modal.show()
}

No @types/bootstrap needed — types are bundled with Bootstrap 5.2+.

Bootstrap 5 with Vite — Complete Setup Guide (2026)

Create a New Project

Install Dependencies

Project Structure

Set Up Sass Entry File

Set Up main.js

Update index.html

Run the Dev Server

Build for Production

Import Only Specific Bootstrap Components

TypeScript Setup

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

Bootstrap 5 with Vite — Complete Setup Guide (2026)

Create a New Project

Install Dependencies

Project Structure

Set Up Sass Entry File

Set Up main.js

Update index.html

Run the Dev Server

Build for Production

Import Only Specific Bootstrap Components

TypeScript Setup

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

How to Install Bootstrap 5

How to Customize Bootstrap 5 with Sass

Vite vs Webpack