Tuesday 6 September 2016

Add Bootstrap to your angular 2 app

So you want to give your application a little bit of style by adding Bootstrap to it? follow the steps below

  1. Open your terminal/CMD/... and go the directory where your project is (Package.json is located)
  2. Run NPM install bootstrap --save-dev  * the NPM install will download bootstrap and put it in the node_modules directory and the --save option will add this dependency to your package.json file. Have a look at it and compare it to the previous version to see what has changed in the file.
  3.  Now you have the bootstrap downloaded, all you need to do is simply add a reference to it in your index.html
<button type="button" class="btn btn-lg btn-primary" routerLink="https" > Https & Services </button>
      4. Go and change any of your html elements to see the result i.e. :
      <button type="button" class="btn btn-lg btn-primary" routerLink="https" > Https & Services   </button>

* You may ask what's the difference between --save and --save-dev. Good question! the answer can be found here.

Have fun!

No comments:

Post a Comment