Add Bootstrap to Angular CLI Project

In this tutorial we will add Bootstrap in our angular cli project. Create a fresh project if you like or you can add in your existing project. Now open command prompt or Terminal and go to your project folder. Here issue the following command.

npm install --save bootstrap@3

This will install Bootstrap 3 latest release locally in this project. You can install Bootstrap 4 by simply replacing 3 with 4 highlighted in green. Enter to execute and it will download Bootstrap and store it in the node_modules folder. This the first step, but it is not usable now, we also need to make Angular aware of this styling package that we want to use and for that we need to a minor change in one of the config files, the most important one the angular.json file, located in the root of the project folder. This configures the CLI project. We do need to change right now is the styles we want to use by default.

Here we have "styles" array under "architect" and "build" arrays as shown in the image above. It already has one entry "src/styles.css". This is a file you can use to define some global styles you want to use application wide for example CSS reset. So, you can enter any code here and it will be used in every Angular component. In this case, we will add Bootstrap library before "src/styles.css", so that we could overwrite it within this file. We need to add this path,

node_modules/bootstrap/dist/css/bootstrap.min.css

because we install bootstrap from npm its natural we will see in node_modules folder. Updated angular.json's styles array will look like this,

"styles": [
	"node_modules/bootstrap/dist/css/bootstrap.min.css",
	"src/styles.css"
]

start node server using ng serve and open developed tools by pressing F12, and you will see Bootstrap in loaded in your project.