How to add bootstrap to angular project

To add and use twitter bootstrap framework into your angular projet follow the next instructions.

Create a new angular project

ng create my-project

 

Install bootstrap dependencies into angular project

npm install bootstrap --save
npm install jquery --save
npm install popper --save #optional

The –save parameter will automatically add the new dependencies into package.json file.

The popper dependency is optional, it helps positioning tool-tips and popovers.

Import css and js files into angular.json file

Inside the file angular.json, locate the styles and scripts lines and make sure you have the following lines :

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
    ],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now you can use bootstrap in your angular project.