- First of all create an empty folder to start your project.
- Next cd into the project folder using the command line.
- Next type in the following command in the terminal :
npm init -y
This command creates a package.json file which contains some details about the project folder you’ve created. This is the first step in initialization of the process.
- Next create an index.html file which is the base file you create for any web development project.
- Next type the following command inside the terminal to install the latest Bootstrap toolkit inside of your project :
npm install bootstrap
This command installs all the bootstrap files and folders inside your project directory.
- Next type in the HTML boilerplate template in the index.html file.
- Next inside the <head> section of the HTML add the following CSS link to access Bootstrap CSS toolkit :
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
- Next inside the <script> section of the body place the following JavaScript link to access Bootstrap JavaScript toolkit :
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Here’s the full code setup inside index.html to make you understand everything clearly :
<!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">
<title>Document</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
That’s how you implement Bootstrap with npm which includes all the node modules and packages installed. You’re now ready to create your very first Bootstrap website.