How to use Bootstrap in your Angular CLI project

Bootstrap is one of popular HTML, CSS and JavaScript framework for front-end development. This is developed for mobile responsive with better website performance and reduce most of the work. You can download the Bootstrap from clicking here. Now the Bootstrap framework can be used together with Angular, In the following steps help to use Bootstrap in your Angular CLI project.

Getting Started with Angular App

Before using Bootstrap, you need to create a new Angular project. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.

Install Bootstrap from NPM in your Angular App

Once you completed the installation for your Angular project, then it is time to add Bootstrap in your Angular CLI. Using Bootstrap CDN is not the proper way to use in your Angular project, here below you have the proper procedure for the installation process.

Install bootstrap using npm and set path in your angular.json file. I recommend the following method to install bootstrap using npm, once it placed in your project folder and you can easily access that. Here the following you going the Bootstrap installation.

Install Bootstrap current version using Node Package Manager (NPM).

Now install the current version of Bootstrap in your Angular project using the following commands. There also another way to install Bootstrap in your Angular app with ngx-bootstrap, if you like to use then here you have an article.

Install Bootstrap using npm

Once you completed the installation of Bootstrap 4, then you required to add two more JavaScript package one is jQuery and another popper.js without these Bootstrap not complete. Bootstrap is using jQuery and popper.js package so you have to install as well.

Install jQuery using npm

Install Popper.js using npm

Now everything installed properly on your project directory inside node_modules folder.

Now open angular.json file from your Angular project, in that you need to add the file path of bootstrap, jquery, and popper.js files inside thestyles[] and scripts[] path, here below you can see the example.

angular.json

Note: You need to keep the JS file in the same sequence as the above and If you see the ng serve is currently running, so you need to stop the process and start again, as changes to angular.json do not get delivered into a running server. To see the changes that you made in your Angular project, for that first you required to restart the process.

Example:

For a quick test now open the app.component.html and add the following HTML code to it which should show a Bootstrap alert.

Once you added Bootstrap alert, below you can see the result which you used in your Angular project.

Conclusion:

I hope this article will helpful for the beginner how to use Bootstrap in your Angular CLI project.

AngularAngular CLI