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": [

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'>

And the result of the example :



Leave a Reply

Your email address will not be published.