Adding Bootstrap to Angular Project

Introduction

Bootstrap is a powerful framework for web development in HTML, CSS, and Javascript. It is widely popular for making responsive HTML used in desktop and mobile applications. Using bootstrap will give our website a modern look. It is an user-interactive framework. This framework can be used with Javascript frameworks like Angular. In this post, we will learn how to install and use bootstrap in our Angular application.

Creating an Angular project

We will create a new Angular project using Angular CLI. As Angular CLI has NPM package, its installation can be done using the below command:
$ npm install -g @angular/cli

After installing the above command successfully, we can create a new Angular project using below command Angular CLI command:
$ ng new mybootstrap-angular-project

Start your web server using the command below:
ng serve

Installing Bootstrap

To install bootstrap using NPM we will move the current directory to our project and then execute the following command. Using --save with the command first downloads bootstrap and then stores into node modules folder. The --save flag will also add bootstrap as the dependency in package.json file also. The main purpose of adding dependencies in package.json file is to use any source management tool like git. We are not going to check in the node modules folder as it takes a fair amount of space on the disk. By listing all the dependencies in package.json file we can install the dependencies using npm install command.
For Bootstrap 3:
npm install bootstrap@3.3.7 --save (install the specific version of bootstrap)
For Bootstrap 4:
npm install bootstrap --save (directly installed latest version of bootstrap)

Installing CSS

After doing the above steps, we will now import the CSS. We need to give the style path in angular.json file as follows:
   "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      // We will add bootstrap CSS entry here
      "../node_modules/@swimlane/ngx-datatable/release/index.css",
      "styles.scss",
      "../node_modules/snazzy-info-window/dist/snazzy-info-window.css",
      "../node_modules/ngx-toastr/toastr.css"
    ],

Another way of importing the bootstrap CSS is as to import the bootstrap CSS in styles.css file. Open style.css and the below code:

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

Now we can start adding bootstrap in our components. 

Comments