Adding Bootstrap to Angular 8

Issue

I am trying to add Bootstrap to my Angular app. I am new to this and although following the required steps I am having problems getting the bootstrap installed.

1. I did all the necessary steps from installing Angular cli, ng new first-app and ng serve.

2. I opened the vs code terminal and tried installing bootstrap using

   npm install bootstrap --save

3. Then adding this in the style.css

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

But still when I click on the link hovering over the above piece of code it says unable to locate file and prompts for creating a file with this path.

Solution

If you just want to add the styles from bootstrap there is a property in the angular.json file that allows you to include it in the build.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

See: https://angular.io/guide/workspace-config#styles-and-scripts-configuration

Answered By - joerideg