bootstrap angular project code example

Example 1: install angular bootstrap

# From project directory:
npm install --save bootstrap
npm install --save jquery

# Now edit `angular.json`
# Position: `projects -> architect -> build -> options`
# To `styles`, add "node_modules/bootstrap/dist/css/bootstrap.css"
# To `scripts`,
#   add "node_modules/jquery/dist/jquery.js"
#   and also "node_modules/bootstrap/dist/js/bootstrap.js"
# Test with
# <<div class="alert alert-primary" role="alert"> Bootstrap alert</div>

Example 2: install bootstrap in angular 9

npm install bootstrap --save

Example 3: bootstrap4 angular install step by step

{  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  "version": 1,   "newProjectRoot": "projects",  "projects": {    "angular-bootstrap-examples": {      "projectType": "application",      "schematics": {},      "root": "",      "sourceRoot": "src",      "prefix": "app",      "architect": {        "build": {          "builder": "@angular-devkit/build-angular:browser",          "options": {            "outputPath": "dist/angular-bootstrap-examples",            "index": "src/index.html",            "main": "src/main.ts",            "polyfills": "src/polyfills.ts",            "tsConfig": "tsconfig.app.json",            "aot": true,            "assets": [              "src/favicon.ico",              "src/assets"            ],            "styles": [              "./node_modules/bootstrap/dist/css/bootstrap.css",              "src/styles.css"                          ],            "scripts": [              "./node_modules/jquery/dist/jquery.js",              "./node_modules/bootstrap/dist/js/bootstrap.js"            ]          },