using bootstrap with angular 4

Using Bootstrap with Angular 4 is so easy. Yes, you heard me right! You just need to install bootstrap in Angular 4 project. There are few steps that you need to learn to get started with Angular 4 Bootstrap. And in this post, I will talk about those steps.  After that, you will be using Bootstrap with Angular 4.

 

Using Bootstrap With Angular 4

There are two ways to use Bootstrap with Angular 4.

  1. Install Bootstrap via NPM.
  2. Use Bootstrap CDN

 

Let’s learn both methods one by one…

 

Must Read: What is New in Angular 4.3?

 

How to Install Bootstrap Via NPM

First, we will create and run a brand new project. To do so, open your terminal and run the following commands.


ng new projectName

cd projectName

ng serve

 

Now, you have a brand new running Angular 4 project. You may open your project in your browser.

 

Now open another terminal and go to the project directory that you have created. Use the following command.

 


cd projectName

 

Now we will install bootstrap using npm command.


npm install --save bootstrap@ jquery

 

This command will install Bootstrap CSS, JS and its dependency jQuery in node_modules folder within your project directory.

 

If you want to install Bootstrap CSS and JS file only in your Angular project then use the following command.


npm install --save bootstrap

 

Now we need to add bootstrap.min.css and bootstrap.min.js file within angular-cli.json.

 

Let’s learn how to do that…

 

How to Add Bootstrap CSS and JS file in Angular 4

Head over to angular-cli.json and look for styles and scripts array. Here is the screenshot of the styles and scripts array that you will see in your project directory.
using bootstrap with angular 4

 




 

Now we will add CSS, JS and jQuery files there. If you didn’t installed jQuary, you add only CSS and JS.


      "styles": [

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

      "styles.css",

      ],

      "scripts": [

      "../node_modules/jquery/dist/jquery.min.js",

      "../node_modules/bootstrap/dist/js/bootstrap.min.js"

      ],

 

Congratulations! You have successfully installed Bootstrap with Angular 4.

 

Recommended: Bootstrap 4 Beta Version: What is New in This Latest Release

 

How to use Bootstrap CDN in Angular 4

To use bootstrap CDN in your Angular project, go to /src/index.html and paste the following Bootstrap CSS CDN before the closing head tag and jQuery and JS CDN before closing body tag.


<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<app-root>Loading...</app-root>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

 

Now bootstrap is completely installed and ready to use it. If you want to check whether is working on not, just use any Bootstrap component in src/app/app.component.html. You will see the added component effect in the browser.

 

Isn’t it Easy to Get Started With Angular 4 Bootstrap

Did you find it simple? Yes? I told you it’s gonna very easy! So, what are you waiting for? Go and enjoy the real world experience of using Bootstrap with Angular 4.

 

Thanks!