How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8

Here, i will give you example of how to add bootstrap 4 in angular 8 project. you can easily install bootstrap in angular 8. i will also give you example of how to use bootstrap in angular 8. you can easily understand angular 8 install bootstrap 4 and use it.

As we know Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites. bootstrap provide several class for making responsive website for your mobile. So if you want to use bootstrap with angular 8 than i will help you very simple way.

I have a two install bootstrap and use it with your angular 8 project. i will give you both way example bellow.

You can easily create your angular app using bellow command:

ng new my-new-app

Example 1:

In this solution, you need to just install bootstrap on your angular 8 and import css file to style.css file. this is only for css importing. so you can run command bellow:

npm install bootstrap --save

Ok, now you need to import your bootstrap css on style.css file as like bellow:

src/style.css

@import "~bootstrap/dist/css/bootstrap.css";

Now you can use bootstrap class in your angular 8 app. It will works.

Example 2:

In this solution, we will also install bootstrap with jquery and popper js. so that way you can also import bootstrap css and bootstrap js function. So i think this will be best solution for you i think.

let's run following commands:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after successfully run above command. let's import it in angular.json file.

angular.json

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

Now you can use bootstrap css and js both.

Now you can check your angular 8 project.

I hope it can help you...