How to add a CSS framework in Angular 2 || 4

After learning a lot from a book I recently bought. I wanted to know how to add in a CSS bootstrapping framework like bootstrap and semantic-ui into my projects globally. So here it goes.

1. Create new application || work from the one you have.

ng new my-app

2. Change to your application directory.

cd my-app

3. Install your favourite css framework.{I usually work with bootstrap or Semantic-UI}.

npm install bootstrap@3 jquery --save

or

npm install semantic-ui --save

4.Open your .angular-cli.json file.

5. Add in you css file path in the styles array. eg.

"styles": ['/node_modules/semantic-ui/dist/semantic.min.css']

6. Add in your jquery script file path to your scripts array and your css framework script file path with that.eg.

"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
,"../node_modules/semantic-ui/dist/semantic.min.js"]

7. Enjoy your coding experience.

Side note. I always find that the order in which you add your scripts and styles are important.