Adding the bootstrap library in an Angular application is quite easy. Bootstrap Library consists of both CSS & JS files.
- Bootstrap CSS files are used for design/UI purpose.
Now, let's understand - How can we add bootstrap library in the Angular application.
Step 1: Install Bootstrap
First, open angular CLI & hit below command.
This will install bootstrap node module in your application inside
npm install bootstrap --save
Step 2: Adding Bootstrap Styles
There are two ways to add bootstrap CSS in the application.
Method 1: Open
angular.json file & add bootstrap CSS file reference in styles array.
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css" ]
Method 2: Open
styles.css file which is present in the
src folder & add an
import statement like below.
popper.js. So first, we have to install these two dependencies from
npm install jquery --save npm install popper.js --save
After this, open
angular.json file & update scripts section like below:
"scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/popper.js/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]
modal('show') to show the modal popup,
tab('show') to activate a tab.
In order to access these methods of bootstrap library & get proper intellisense support in Visual Studio Code IDE, we should install
npm install @types/jquery --save npm install @types/bootstrap --save
tsconfig.json - Look into this file for types array and add jquery and bootstrap entries.
"types": [ "jquery", "bootstrap", "node" ]
That's all :)