How to Install Bootstrap In Angular 6 Application

Introduction

In this Article, you will Learn how to install and configure Bootstrap into the Angular 6 Application. Before proceeding further, I would recommend that you will Learn how to Create a new Angular 6 Project using the Angular CLI command.

Install Bootstrap

Here is the NPM command for installing Bootstrap and some of the features in Bootstrap. so it has a dependency on JQuery so this command installs both Bootstrap3 and JQuery to your angular application.

The angular application is present in this project directory. Let’s execute the following command. which is going to install both Bootstrap and JQuery into the node_modules folder.

install both Bootstrap and JQuery into the node_modules

Project Dependencies

The dependencies within our package.json file. we have an entry for both bootstrap and jQuery version3.

bootstrap and jquery libraries in package.json

Let’s see the node_modules folder we should have a folder for Bootstrap and in that The bootstrap folder inside that we have both minified and non-minified CSS versions of the CSS files.

minified and non-minified CSS versions in Bootstrap

We have a folder for JQuery. the inside JQuery folder has non-minified and minified versions of the JQuery.

minified and non-minified CSS versions of the JQuery

After successfully executing the NPM command to install bootstrap. you may not find the node_modules folder in Visual Studio Code. If that is the case restart visual studio code.

Using angular.json configuration file

Then we need to configure it for use in the angular CLI configuration file angular.json in angular 6. Because of the angular CLI configuration file rename from angular-cli.json to just angular.json

Bootstrap and JQuery declaration in package.json

In this file in the Style section. we include the path to the bootstrap CSS file and in the script section. we include the path to the jQuery file.

Add root component file

Let’s include a button in the root component (app.component.html) file.

bootstrap button in app.component.html

Let’s build and run this project in command line.

run angular 6 project in command cli

And see the output in Browser as we expected.

angular 6 bootstrap output Output Bootstrap Button

Thank you for reading this article. I hope you get started your application using Angular 6 CLI and also read more articles related to mechanical

Leave a Reply

Your email address will not be published. Required fields are marked *