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.
- Install Bootstrap via NPM.
- 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.
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.js file within
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
scripts array. Here is the screenshot of the styles and scripts array that you will see in your project directory.
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.
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.