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 with Starter Repo
Bootstrap 5.2 also provide stater.
git clone https://github.com/twbs/examples.git
cd examples/vite/
npm install
npm start