If you've been putting off learning Bootstrap 5 because you weren't sure how to set it up — this guide is for you.

I'm going to show you 4 ways to install Bootstrap 5, from the dead-simple CDN method to the full npm + Vite setup for production projects. Pick the one that matches your project.

Method 1: CDN (Quickest Way)

This is what I use when I'm prototyping or building a quick static page. No npm, no build tools, just paste two lines and you're done.

Add this to your <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Add this before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

That's it. Here's a full working HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap 5 Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1 class="display-4">Hello Bootstrap 5</h1>
    <p class="lead text-muted">Bootstrap 5 is working.</p>
    <button class="btn btn-primary">Click me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Open this in a browser and you should see a clean page with Bootstrap's default font and a blue button.

Quick tip: Use bootstrap.bundle.min.js not bootstrap.min.js. The bundle version includes Popper.js which is required for dropdowns, tooltips and popovers to work.

Method 2: npm (For Real Projects)

If you're working on a proper project with a build tool, install Bootstrap via npm:

npm install bootstrap

Then import it in your JavaScript entry file:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'

// Import Bootstrap JS (includes Popper)
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

Or if you only need specific components (better for bundle size):

import { Modal, Tooltip, Dropdown } from 'bootstrap'

This approach lets your bundler tree-shake unused Bootstrap JS so your final bundle is smaller.

Method 3: Bootstrap 5 with Vite (Recommended for 2026)

Vite is fast, simple and has become the standard build tool for modern front-end projects. Here's how to set up Bootstrap 5 with Vite from scratch.

Step 1 — Create a new Vite project:

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

Step 2 — Install Bootstrap and Sass:

npm install bootstrap
npm install --save-dev sass

Step 3 — Create your custom Sass file:

Create src/styles/main.scss:

// Optional: Override Bootstrap variables before importing
$primary: #fd4766;
$font-family-base: 'Inter', sans-serif;
$border-radius: 8px;

// Import all of Bootstrap
@import "bootstrap/scss/bootstrap";

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

Step 4 — Import in your main JS file:

// main.js
import './styles/main.scss'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

Step 5 — Run the dev server:

npm run dev

That's it. You now have Bootstrap 5 with full Sass customization and hot module replacement.

Method 4: Bootstrap 5 with npm — Sass Only (No Bundler)

Some people prefer not to use a bundler for simpler projects. You can compile Sass directly using the Sass CLI.

Install Sass globally:

npm install -g sass

Install Bootstrap:

npm install bootstrap

Create your Sass file:

// custom.scss
$primary: #fd4766;
@import "node_modules/bootstrap/scss/bootstrap";

Compile to CSS:

sass custom.scss output.css --watch

The --watch flag recompiles whenever you save. Link the output CSS in your HTML just like the CDN method.

Which Method Should You Choose?

Honestly, it depends on your project:

Project TypeBest Method
Quick prototype or static HTMLCDN
WordPress or PHP projectCDN or npm
React, Angular or Vue appnpm + Vite
Need Sass customizationVite + Sass or Sass CLI
Learning BootstrapCDN

I've been using Bootstrap since version 3 back in 2013. For any production project I always use the Vite + Sass setup — it gives you full control over which variables to override and keeps your bundle lean. For anything quick and throwaway, CDN is fine.

Verifying Bootstrap 5 is Working

Once installed, paste this in your HTML to confirm everything works:

<!-- Test: Button -->
<button class="btn btn-primary">Bootstrap is working</button>

<!-- Test: Grid -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Left column</div>
    <div class="col-md-6">Right column</div>
  </div>
</div>

<!-- Test: Modal (requires JS) -->
<button data-bs-toggle="modal" data-bs-target="#testModal" class="btn btn-secondary">
  Test Modal
</button>
<div class="modal fade" id="testModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">Bootstrap JS is working!</div>
    </div>
  </div>
</div>

If the button is blue, the grid works and the modal opens — you're good to go.

Common Installation Issues

Grid not working? You're probably missing the viewport meta tag. Add this to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Modal not opening? You're using bootstrap.min.js instead of bootstrap.bundle.min.js. The bundle version includes Popper.js which modals need.

Sass not compiling? Make sure the path to Bootstrap's scss folder is correct. If installed via npm it should be at node_modules/bootstrap/scss/bootstrap.

Styles not applying? Check the browser console for 404 errors on the CSS file. Either the CDN URL is wrong or the file path is incorrect.

Frequently Asked Questions

The CDN method is the easiest. Add one link tag in your HTML head and one script tag before the closing body tag. No build tools, no npm, no configuration. Done in 30 seconds.
CDN for quick prototypes, static sites and simple projects. npm for production apps using a bundler like Vite or Webpack where you want to import only what you use and customize via Sass variables.
Yes. Bootstrap 5 dropped jQuery completely. You only need the Bootstrap JS bundle which includes Popper.js for dropdowns and tooltips. No jQuery dependency at all.
Yes. For React use react-bootstrap or add Bootstrap CSS only and write your own JS interactions. For Angular use ng-bootstrap or ngx-bootstrap — both provide Angular-native Bootstrap components without the Bootstrap JS.
Bootstrap 5.3.3 is the latest stable version as of 2026. It added color mode support (dark mode), new color utilities and CSS variables improvements over Bootstrap 5.0.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Navbar Example

View examples →

Bootstrap 5 Grid System Example

View examples →

Bootstrap 5 vs Tailwind CSS

View examples →