Bootstrap Integration - Angular 6 / Angular 7

Posted at: December 15, 2018 3:54 PM

Integrate bootstrap 4.x in Angular 6 or 7.

Step1:

Go to download section on bootstrap website and see "Install Bootstrap in your Node.js powered apps with the npm package" Run this command on your angular app.


npm install bootstrap
Copy

Step2:

Go to node_modules directory and and see bootstrap directory. Its contain css and js file.

Step3:

Download latest jquery library from this https://jquery.com/download/. Upload this file in folder node_modules/bootstrap/dist/js

Now edit angular.json file for adding css and js. This file is available in your project root folder.

Add bootstrap.min.css in side architect->build->options: "styles"object

node_modules/bootstrap/dist/css/bootstrap.min.css

Add bootstrap.min.js in architect->build->options: "scripts"object

node_modules/bootstrap/dist/js/bootstrap.min.js

angular.json file.


"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/blogger",
        "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"
            }
          ]
        }
      }
    },
Copy
This lesson also available on YouTube
Bootstrap

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

5 Comments


Rahul Gupta 5 years ago
On clicking the button the model is not open please suggest i coded according to your video tutorial
Reply
bharadwaja 6 years ago
my bootstrap integration not working
Reply
Ajay 6 years ago
Very nice, can you tell me what is bootstrap version you have integrated?
Reply
    truecodex 6 years ago
    Bootstrap 4.1.x
    Reply