Bootstrap 4 Cookbook
上QQ阅读APP看书,第一时间看更新

How to do it...

  1. Inspect the versions of Node and npm installed on our virtual machine:
In Windows, you can check the Node version with node -v, and npm version with npm -v.
  1. Inspect the available versions of Bootstrap to be installed:

The preceding command shows us that we can either install Bootstrap 3 (latest stable version) or Bootstrap 4 (latest alpha version); we will install Bootstrap 4.

  1. To install the latest alpha version of Bootstrap 4, run the following command:

Running the preceding command will almost instantly install the newest version of Bootstrap 4 in our node_modules directory. Inspect the directory's contents with ll (c9), or dir (Windows).

  1. Navigate to the node_modules/bootstrap folder:
      cd node_modules/bootstrap
  1. Install all the dependencies via npm install:
      npm install

After running the npm install command, a number of dependencies will be installed, just as listed in the package.json file. The installation will take some time. The reason why it takes so long is mostly due to the installation of the PhantomJS headless browser, which is used for testing in Bootstrap 4.

Once the installation process is completed, you will be greeted with a large number of folders and files. There are about 40 folders inside the node_modules folder. These folders house specific dependencies, such as grunt-sass or eslint. All of these dependencies are located inside the node_modules/bootstrap/node_modules path.

Here is the structure of the files installed using the npm approach:

After the installation is completed, the dist folder contains all the CSS and JavaScript needed to run a website.

The dist folder is located at node_modules/bootstrap/dist.

All that is left now is to add HTML pages, and correctly reference the styles and scripts from the dist folder.