Angular – Bootstrap & Font-Awesome

Overview

In order to install Bootstrap NOT ng-bootstrap which is a feature rich CSS library/framework. This is Bootstrap with JQuery and Popper, which are needed for certain animations such as drop downs and popups.

Alternatively ng-bootrap is a popular library for Angular with additional features, but it if you just want Bootstrap then this is how to install it.

Execute the following NPM Install commands from the terminal.

npm install bootstrap --save
npm install jquery --save 
npm install popper.js --save

If you don’t uses angular Materials then you may want to consider Font Awesome.

npm install font-awesome --save

Update the Angular.Json file.

Update the styles and script sections for both development and production.

"styles": [
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss",
],
"scripts": [
       "node_modules/bootstrap/dist/js/bootstrap.min.js",
        "node_modules/popper.js/dist/popper.js"
]

OR

You can add the @Imports to the style.css file.

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

Now use ng serve to run your project.