Get in touch

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Mim
Front End Developer
November 18, 2021

How to add Bootstrap to Angular

We need to install Bootstrap. Change the directory to the project we created 

cd your project

  • Step 1 : Installing Bootstrap from npm .

Basically, Bootstrap 5 can be implemented easily now, and we don't even need jQuery. 

From your terminal, just run : npm install –save bootstrap or npm install bootstrap --save

Installing bootstrap from npm  


  • Step 2 : Check Bootstrap file in node_modules 

Then we can check in node_modules folder. If you have successfully add the file, we can find the file name “bootstrap” in this folder. 



  • Step 3: Importing the CSS 

We have two options to import the CSS from Bootstrap that was installed from npm 

1. Import bootstrap stylesheet in angular.json file : 

We will find the angular.json folder and import bootstrap stylesheet in “styles” from the following command: 

"node_modules/bootstrap/dist/css/bootstrap.min.css" 

2. Import directly in main style.css or style.scss : 

Next … we will import the following command in main style.css or style.scss & you are ready to use bootstrap for styling, grid etc. 

Recommend Articles