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

Bootstrap and Darkmode

Recently (well, not that recently) an issue was submitted to my hobby project that the background, which was very bright white, was a little off putting. Apparently people are surfing on my website at night.

Since I have a new monitor¹, I must say that the new monitors indeed transmit a staggering amount of light.

Of course, this means something has to be done about it (apparently) and it's called Darkmode².

Personally, I find that a bright screen enables me to keep working in the dead of night without becoming tired, but that's just me. And probably not entirely healthy.

Anyway, I am using Bootstrap³, so I was looking for a Bootstrap Theme to fix this problem.

A lot of really FANTASTIC themes for Bootstrap can be found on Bootswatch⁴.

I choose Cyborg⁵ from their selection.

The switching

Next is how to provide the websurfer with a choice between the two modes, normal mode and darkmode.

You can find a lot of different ways of doing it, just surfing around.

Now, obviously, I do not wish to add all sorts of classes to my html pages. I just want to replace the appropriate links to the .css files in my html.

I have two different setups in my current website, static pages through a templating engine and two SPA using Angular.

Static pages

For the static pages, the problem is actually non-existant. I just add the appropriate css- and javascript-links in my webpage based on a Darkmode cookie setting, and away we go.

Angular

For Angular, I must confess I used a very low-tech solution, that some of you might not like.

Basically there is a index.html in my Angular app, that contains the link to the css file and I just replace the link using javascript.

I do this in the ngOnInit() of the central Angular component.

As follows:

References

[1] My new monitor

https://randomthoughtsonjavaprogramming.blogspot.com/2019/07/a-new-monitor.html

[2] Wikipedia - Light-on-dark color scheme

https://en.wikipedia.org/wiki/Light-on-dark_color_scheme

[3] Bootstrap

https://getbootstrap.com/

[4] Bootswatch

https://bootswatch.com/

[5] Bootswatch - Cyborg

https://bootswatch.com/cyborg/