How to correctly add bootstrap to Angular app

Question

I created angular app and install bootstrap using "npm install bootsrap" and add the path to angular.json file. but when i create a button and add bootstrap classes the output doesn't show applying bootstrap classes.

here what i get as an output

Can someone help me to solve this... thanks

Visit https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project — Chinmay Phanasgaonkar, Jul 22 '21 at 06:01
Does this answer your question? [How to add bootstrap to an angular-cli project](https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project) — IAfanasov, Jul 22 '21 at 07:27
Please check my video : https://www.youtube.com/watch?v=ePoxNM-Tsjg — edhi.uchiha, Jul 22 '21 at 07:44

score 5 · Answer 1 · answered Jul 22 '21 at 08:02

First things first you want to add bootstrap latest (5) as an npm package like so:

npm install bootstrap@next

In your angular.json add bootstrap stylesheet and javascript:

"styles": [
  "src/scss/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
],

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now add popperjs and add it to your scripts:

npm install @popperjs/core
"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now lets test and see if everything works accordingly Add a dropdown component to your app.component.html

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

You should be able to click and view the dropdown menu items

Thanks this helped! I'd like to add that you can also import the styles, e.g. ```@import "~bootstrap/scss/bootstrap";```. Also, instead of adding popper.js separately, you can add it bundled with bootstrap in one go: ``` "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"```. — MikhailRatner, Jul 07 '22 at 09:21

score 2 · Answer 2 · answered Jul 22 '21 at 07:47

2

You can do this

npm i bootstrap --save

and add the bootstrap in angular.json

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

answered Jul 22 '21 at 07:47

edhi.uchiha

366
2
9

score 2 · Answer 3 · answered Jul 22 '21 at 20:00

2

If you have angular version above 9+ you can use this

ng add @ng-bootstrap/ng-bootstrap

To get an idea you can refer this document: https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap

answered Jul 22 '21 at 20:00

Samanthika Rajapaksa

950
1
9
24

score 0 · Answer 4 · answered Jun 02 '22 at 20:32

If you are using Sass, you need to do the following two steps:

Install bootstrap using npm i bootstrap
In angular.json file, add the following line to the styles array before any other entry: "./node_modules/bootstrap/scss/bootstrap.scss"

Your styles array should look like this ("build" -> "options" -> "styles"):

"styles": [
    "./node_modules/bootstrap/scss/bootstrap.scss",
    "src/styles.scss"
],

How to correctly add bootstrap to Angular app

4 Answers4