
Step 4: Accessing Bootstrap JavaScript Library in Angular npm install jquery -saveĪfter this, open angular.json file & update the scripts section like below: "scripts": [ So first, we have to install these two dependencies from npm. "~bootstrap/dist/css/" īootstrap JavaScript components depend upon two other JavaScript libraries - jQuery & popper.js.

Open styles.css file which is present in the src folder & add an import statement like the below. Open angular.json file & add bootstrap CSS file reference in styles array. There are two ways to add bootstrap CSS to the application. This will install bootstrap node module in your application inside node_modules folder. Now, let's understand - How can we add the bootstrap library to the Angular application? Step 1: Install Bootstrapįirst, open angular CLI & hit the below command. Bootstrap JavaScript files are used in some of its components such as Accordion, Tooltip, Modal Popup, Tabs, etc.Bootstrap CSS files are used for design/UI purposes.

Bootstrap Library consists of both CSS & JS files. Adding the Bootstrap library to an Angular application is quite easy.
