November 18, 2021

How to add Bootstrap to Angular

Mim
,
Front End Developer

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. 

More Articles

Need us help?
Contact Us
Got a talent
Join Us