Install bootstrap in Angular

Vinay Ranjan • 1 min read

Step 1: 

npm i bootstrap @fortawesome/fontawesome-free --save

Step 2:

  1. CDN fontwesome - search in google

  2. CDN JS - Click here

  3. Copy the first link from the tag.

  4. Open index.html and paste the link copied from the site in the <head> section.

Step 3:

Configuring bootstrap and fontawesome in angular app

  • Open angular.json

  • search for styles and scripts array inside build object.

  • Copy below and paste there. [ Note : if this not working try to do it manually. ]

 "styles": [
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css",
            ],

"scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
            ]

Step 4:

  • Google font : Ubuntu font

  • Go to google font official site Click here and search for Ubuntu font.

  • Copy the import statement and paste that in the global style.css file so that it will be accessible in all the pages.

body {
  font-family: "Ubuntu", sans-serif !important;
}
  • In app.component.html
<button type="button" class="btn btn-success">Click Me</button>

Note : Check if the color of the button is green then it means that we have successfully installed bootstrap in angular app.

Thanks for reading !!! 😊
Share this post :
Published in : on 12 May 2021
Something is not right ? : Edit this Post

Getting started with angular components

Previously

HTTP in Angular

Coming up next