Install Bootstrap into an Angular Project (version 2+)

Hey guys! Angular is the most trending JS framework nowadays. So I started to learn this amazing framework. I must say that I found bit difficult to grad the basics in this framework. You may also have the same situation. But never give up! Try and try!

As we know, in web development industry, CSS frameworks are used to easily style the web pages. So my favorite one is Bootsrap. Now I’m going to tell you the way to install Bootstrap into an Angular project.

Step 1

First you need to create an Angular application.
ng new Test

Run the project using ng serve command.
See the output..Welcome Title is shown like this now..The basic h1 HTML tag is used.

Step 2

Navigate into the project folder from cmd.
cd Test

Step 3

Type the following code to install Bootstrap latest version. It will show a success message in the cmd after completing the installation. You can use 3 or 4 here..
npm install bootstrap@3 jquery --save

Step 4

Now we need to give the path for newly installed Bootstrap package. We use .angular-cli.json file to include this. Open this file in a text editor and go to section called styles and scripts.There you can see two json arrays with [ ] marks. Place the below line within those brackets.

      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

After installing Bootstrap, look at the view rendered in the browser now! The h1 tag should be with the styles available in Bootstrap..Like this..

Now you can use any Boostrap class in your HTML files. Ready to go with Bootstrap!

I will bring you more on Angular in future..
Till then, Good Bye!