Bootstrap and Font-Awesome

Follow these steps to install and configure bootstrap and font-awesome packages in Angular

// give below  commands at the vscode command prompt
npm install bootstrap 
npm install font-awesome

To see the bootstrap documentation pls visit the site https://getbootstrap.com/

We have installed the free version of font-awesome, to see the documentation

You can visit below font-awesome site links to see more details

https://fontawesome.com/v4/

https://fontawesome.com/v4/examples/#basic

https://fontawesome.com/v4/examples/#animated

Add Styles to angular.json

After installation, you need to include the CSS files for Bootstrap and Font-Awesome in your Angular project.
Open angular.json and locate the styles array under the build options. Add below paths to the CSS files:

//angular.json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/styles.css"
],

Add Bootstrap JavaScript reference

If your project requires Bootstrap’s JavaScript components (like modals, tooltips, or carousels), add the required JavaScript files. Add below paths to the scripts array in angular.json

//angular.json
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
//bootstrap.bundle.min.js includes Popper.js, required for tooltips and dropdowns.

Verify Installation

You may use a Bootstrap class (e.g., .btn-primary) or a Font-Awesome icon (e.g., <i class="fa fa-home"></i>) to verify the setup. Pls add below code in app.component.html and run the application, then see the output in a browser

<button >Normal Button</button>
<hr>
<button class="btn btn-primary">Bootstrap Button</button>
<hr>
<i class="fa fa-home"></i>
<hr>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<hr>

Now run below command to see the output in browser

ng serve --o