Today we will see how to install & setup bootstrap 5 project. There are multiple way you can install bootstrap 5 using bootstrap 5 CDN for testing design ui, or create simple portfolio you can use cdn. or you can use npm for install bootstrap 5. let see.
1) Setup Bootstrap 5 with CDN
If you are creating small type of project like portfolio. landing page or testing bootstrap 5 components, then you can use bootstrap 5 CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Bootstrap 5 with CDN</title>
</head>
<body>
<h1>Hello world</h1>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
2) Download Bootstrap 5 Source files
You can also start to download bootstrap 5 file.
After download bootstrap 5 file you need to extract zip file. Then you need to setup index.html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Setup Bootstrap 5 folder structure</title>
</head>
<body>
<h1>Hello world</h1>
<script src="js/bootstrap.js"></script>
</body>
</html>
3) Start Bootstrap 5 with Stater kit
Install bootstrap 5 template via npm.
npm i startbootstrap-bare
or clone bootstrap 5 stater.
git clone https://github.com/StartBootstrap/startbootstrap-bare.git
or you an download bootstrap 5 stater.
https://github.com/StartBootstrap/startbootstrap-bare
npm Scripts
npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
npm run build:assets copies the files in the src/assets/ directory into dist
npm run build:pug compiles the Pug located in the src/pug/ directory into dist
npm run build:scripts brings the src/js/scripts.js file into dist
npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
npm run clean deletes the dist directory to prepare for rebuilding the project
npm run start:debug runs the project in debug mode
npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src
You must have npm installed in order to use this build environment.
