Bootstrap Integration
To Integrate bootstrap in angular project you need to follow below steps..
Step 1
Go to official website of bootstrap and click on Download button.
You can click on below link for the same. This link will redirect to download section of bootstrap official website:
https://getbootstrap.com/docs/4.3/getting-started/download/and go to Package managers and see the npm “Install Bootstrap in your Node.js powered apps with the npm package”.
And run the npm command in your angular app terminal.
npm install bootstrap
Step 2 :
After installation bootstrap, check in your angular app.
Go to node_modules directory of your angular app and see bootstrap directory. It contains css and js files in dist folder.
Step 3 :
Go to official website of jquery and download latest jquery library. You can click below link for the same
https://jquery.com/download/And upload this file in folder node_modules/bootstrap/dist/js.
Step 4 :
Now add the reference of css and js file of bootstrap and js file of jquery in angular.json file for angular app.
Add bootstrap.mis.css in side bulid -> options -> Styles
Like :
node_modules/bootstrap/dist/css/bootstrap.min.css
Add bootstrap.min.js in bulid -> options -> Styles
Like:
node_modules/bootstrap/dist/js/bootstrap.js.css
Add jquery.min.js in bulid -> options -> Styles
Like:
node_modules/bootstrap/dist/js/jquery.js.css
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/Sahosoft", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/bootstrap/dist/js/jquery-3.3.1.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"