Angular - Add Bootstrap to your application

Bootstrap components / styles installation

In the root of your angular project open package.json file and add new dependency for Bootstrap and font-awesome.

… “dependencies”: { … … “bootstrap”: “^3.3.7”, “font-awesome”: “^4.7.0” } …

Update installed dependencies with npm :

$ npm install

Add new directive for styles in .angular-cli.json configuration

… “styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.css”, “../node_modules/font-awesome/css/font-awesome.css”, “styles.css” ], …

After you build your angular application, new webpack prepared application will contain bootstrap components and font.

Start using bootstrap

Simply use bootstrap class directives in your templates, partial template code:

And the result of the example :