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.
example:
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
–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 .
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.
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.
make sure to change the path according to your template folder structure.
Leave A Comment