Adding Bootstrap to Angular 8

Question

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.

I did all the necessary steps from installing Angular cli, ng new first-app and ng serve.
I opened the vs code terminal and tried installing bootstrap using

npm install bootstrap --save
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.

joerideg · Accepted Answer · 2020-05-04 21:07:11Z

3

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

edited May 4, 2020 at 21:07

answered May 4, 2020 at 20:42

joerideg

1,9181 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sin2akshay Over a year ago

Do we need to mention the JS file as well for Bootstrap in angular.json

Keshav Pradeep Ramanath · Accepted Answer · 2021-01-02 12:16:29Z

2

Add the below line in the style.css file which is present under the src folder inside the project.

@import '~bootstrap/dist/css/bootstrap.min.css';

answered Jan 2, 2021 at 12:16

Keshav Pradeep Ramanath

1,7074 gold badges24 silver badges33 bronze badges

Comments

Nick Hodges · Accepted Answer · 2020-05-04 19:40:49Z

0

Welcome to StackOverflow!

Bootstrap isn't TypeScript code, so you don't import it as such. Instead, it is CSS code, and thus you want to import it in your index.html file as a `

Here's how I import boostrap in my apps -- the below goes into the <head> tag of index.html

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Doing this then allows me to use Bootstrap within any of my code templates.

BTW, that code will link to the 4.3.1 version -- if you want to link to a different version, you can go to https://getbootstrap.com/ and get a "fresh" link -- the site is very helpful in getting you going with the CDN links.

But I see that you want to import it into your styles.css file, so you'll likely have to use a relative path, probably something like:

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

edited May 4, 2020 at 19:40

answered May 4, 2020 at 19:32

Nick Hodges

17.2k12 gold badges72 silver badges135 bronze badges

1 Comment

ionut-t Over a year ago

or can be imported in the styles array from angular,json file like so: node_modules/bootstrap/dist/css/bootstrap.min.css. in Angular is the common way to import it.

Learner · Accepted Answer · 2020-05-16 12:42:05Z

0

An easy method to add bootstrap is by using Angular CLI(npm install).

From the command line interface install bootstrap and references it in angular.json

npm install bootstrap --save

answered May 16, 2020 at 12:42

Learner

158 bronze badges

Comments

Mazba Uddin · Accepted Answer · 2022-07-29 16:14:37Z

0

If you want to add [email protected] || Here is the procedure.

Step 1. Install bootstrap. Run this command in your terminal.

npm install [email protected]

Step 2. Install Jquery. Run this command

npm install jquery

Step 3. Then, go to the angular.json file

...
        "styles": [
          "src/styles.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
...

Step 4. Don't forget to restart your app.

edited Jul 29, 2022 at 16:14

answered Jul 29, 2022 at 16:09

Mazba Uddin

2013 silver badges10 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap to Angular 8

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related