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"