Get I.T. Going: Adding CSS style sheet to angular CLI project

Here I am gonna demonstrate you how to add CSS style sheets to angular CLI project. Let's say we need to add bootstrap.css into our angular cli project, so here is how you can do that in different ways.

There are two ways to add bootstrap styling to angular 4 project one is by installing the bootstrap node package and the other is by using the CDN (Content Delivery Network) for providing bootstrap files. Both of these methods are illustrated below.

By installing bootstrap node package:-

First of all install bootstrap into your angular project by running the below command:-

npm install --save bootstrap

Now open angular-cli.json file and add the following line to the styles array of the project to which you want to provide bootstrap styling :-

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

such that the final styles array looks something like this one:-
```
"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]
```
If you don't have a node module for your CSS file then simply put it into the src folder of your Angular CLI app and add it to the styles array in angular-cli.json, as is done with styles.css above.

Alternatively to step 2, instead of modifying angular-cli.json file you can directly import the css file into styles.css file. For that just open the src/styles.css file of your project into editor and add the following import statement at the top of it:-

@import "~bootstrap/dist/css/bootstrap.min.css";

Yet another alternative to steps 2 and 3 is that you can directly include the style sheet in index.html page of the project. For that just add the below mentioned link tag to the <head> section of the index.html page.
```
.
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
```

By using the bootstrap cdn :-

Another easier way to add bootstrap styling to your project is by using the bootstrap CDN.

Open the src/styles.css file into editor and add the following import statement at the top of it:-

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Again as an alternative to step 1 we can directly add the below mentioned link tag to the <head> section of index.html page.
```
.
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
```

Adding CSS style sheet to angular CLI project

By installing bootstrap node package:-

By using the bootstrap cdn :-

1 comment: