How to Install Bootstrap 5.2 with Vite

How to Install Bootstrap 5.2 with Vite

07/22 By frontendshape

In this section we will install & setup bootstrap 5.2 with vite tool. Bootstrap v5.2.0 is finally stable released bootstrap 5.2 come with lots of feature and it also support vite. lets install bootstrap 5.2 with vite.


Use Bootstrap 5.2 Via CDN

If you want test you bootstrap 5 style or component then use bootstrap 5.2 cdn.

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>


Install Bootstrap 5.2 with Vite

First you need to create project folder and initialize npm project. run below command to create project.

mkdir my-project && cd my-project
npm init -y

Install Vite.

npm i --save-dev vite

Install Bootstrap. Now we can install Bootstrap. We’ll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.

npm i --save bootstrap @popperjs/core

Install additional dependency. In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap’s CSS.

npm i --save-dev sass


Create Bootstrap 5.2 Project structure

Run below command to create src folder, scss and other file.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

When you’re done, your complete project should look like this:

Setup Config File

vite.config.js

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Next we fill in src/index.html. This is the HTML page Vite will load in the browser to utilize the bundled CSS and JS we’ll add to it in later steps.

src/index.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>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Setup Bootstrap 5.2 Run Command

package.json 

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.53.0",
    "vite": "^3.0.2"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.2.0"
  }
}

Now your npm command ready command.

npm start
//or
npm run dev
//or 
npm run build


Import Bootstrap

Now, let’s import Bootstrap’s CSS. Add the following to src/scss/styles.scss to import all of Bootstrap’s source Sass.

src/scss/styles.scss 

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

Next we load the CSS and import Bootstrap’s JavaScript. Add the following to src/js/main.js to load the CSS and import all of Bootstrap’s JS. Popper will be imported automatically through Bootstrap.

src/js/main.js

// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
install bootstrap 5.2 vite

install bootstrap 5.2 vite

Install Bootstrap 5.2 with Starter Repo 

Bootstrap 5.2 also provide stater.

git clone https://github.com/twbs/examples.git
cd examples/vite/
npm install
npm start


Enter Your Search Query