Installing Bootstrap with NPM

I thought it would be a good idea to write this stuff down. You can easily find sources on the web that indicates the same instructions.

Bootstrap contains some css files and some js files.

Bootstrap also uses some optional dependencies.

Make sure NPM is the latest

npm install -g npm

Make sure your Bootstrap¹ is updated and/or installed with npm.

npm install bootstrap --save

You will probably see some warnings regarding bootstrap:

npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack-dev-server/node_modules/fsevents):

Install the jquery² if you like.

It provides Bootstrap with some additional behaviour that can be initiated by the websurfer.

npm install jquery --save

Install popper.js³ if you like.

It's for popovers and tooltips and things.

npm install popper.js --save

I also use bootswatch⁴ for the amazing Bootstrap themes that they have.

npm install bootswatch --save

Angular

As I am using Angular⁵, I need to add it so Angular adds it to the app.

Add in angular.json:

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

This is the way I have added Bootstrap, but there are a lot of other ways to install Bootstrap into an Angular app.

I could have added the links to the css and the javascript in the index.html file instead, but this way it gets packaged and minified into the app.

The blog post on [5] helped me a lot.

The way I am using, is not necessarily the right way. Here are some other ways to use Bootstrap with Angular.

use NgBootstrap⁶

I personally chose not to go this route, as it means spilling a lot of Bootstrap-specific stuff into my typescript code.

use ngx-bootstrap⁷

Basically has the same ideas as NgBootstrap

References

[1] Bootstrap - Getting started 3.4

https://getbootstrap.com/docs/3.4/getting-started/

[2] JQuery

https://jquery.com/

[3] Popper.js

https://popper.js.org/

[4] Bootswatch - Themes for Bootstrap

https://bootswatch.com/help/

[5] Using Bootstrap with Angular

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

[6] NgBootstrap

https://ng-bootstrap.github.io/

[7] ngx-bootstrap

https://github.com/valor-software/ngx-bootstrap