But we might need to call some methods of this library such as modal('show') to show the modal popup, tab('show') to activate a tab. So far, we have added the bootstrap JavaScript library to the application. 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.

Visual studio code install bootstrap