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:

<div class='panel panel-default'>
  <div class='panel-heading'>
    <h3 class='panel-title'>
      {{title}}
    </h3>
  </div>
...
...

And the result of the example :

 

 

Leave a Reply

Your email address will not be published.