Install bootstrap in Angular

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 :