There are different ways to add Bootstrap CSS to an Angular Application.

Way 1: Using Bootstrap CDN

This is straight forward solution. We can add Bootstrap CSS CDN link to the ‘index.html’ file which will be located inside the ‘src’ folder.

Though this method of adding Bootstrap or any other CSS to an Angular application is straight forward and easy, the limitation can be, if the user do not have internet connection, then they will not be able to download the CSS files.


Copy to Clipboard

Way 2:  Using npm install

This is the commonly used method to add add Bootstrap CSS to an Angular project.

In the root folder of the application (where your package.json file is located), run the following command

Copy to Clipboard

–save command add an entry of bootstrap inside the ‘package.json’ file as a developer dependency. The reason for adding an entry to the package.json file is, if you want to carry your application to a different system, it will be difficult to carry the ‘node_modules’ folder as it is usually quite big in size containing thousands of files. So you can carry all the files except node_modules.

In the the other system, you can simply type ‘npm install’ command. With this command, node will install all the dependencies that are entered inside package.json file. If you skip –save in the above method, then you have to install Bootstrap again manually in the new system.

If you want to install any specific version you can use ‘@‘ like ‘npm install bootstrap@4.6 –save’

When you run the above command (npm install bootstrap –save)  node will simply download the bootstrap files and keeps it inside the node_modules folder. It will not be linked to your angular application. We need to do it manually. There are couple of ways to to it

Way 2:  1 – Through angular.json file

Open your ‘angular.json’ file and add the path to the downloaded bootstrap folder inside styles array. Note that there will be two ‘styles’ arrays inside angular.json file, you need to add path to the first one, not only to the one which is inside ‘test’ object. If you want you can add at both places .

Copy to Clipboard

Make sure that you re-start your application to after making changes to the angular.json file.

Way 2: 2 – Through styles.css file

Another way to include the downloaded bootstrap css file inside the application is by using css import method. You can add the following ‘import’ command in your main styles.css file which will be there inside the ‘src’ folder.

Copy to Clipboard

Way 3: Using assets folder

Sometimes your bootstrap css may come along with some other template (usually admin templates). In that case you may have to use a specific version of bootstrap which is included in the template bundle. If you install bootstrap separately here, it may not be fully compatible with your template due to any version difference.

In this case, you can place all your assets in your ‘assets‘ folder, which will again be located inside the ‘src’ folder. You can then give its relative path in your index.html file.

Copy to Clipboard

make sure to change the path according to your template folder structure.