Angular | Install Bootstrap in angular project

Bootstrap is a free and open-source CSS framework, it is directed at responsive, mobile friendly front-end web development. It contains CSS and (optionally) JavaScript-based design templates, along with that typography, forms, buttons, navigation, and other user interface components.

So let’s install Bootstrap in our one of project which we have created for demo purpose.

Note: Please make sure you have node and NPM installed in your system.

–You can check your node version and NPM version by using the following command:

node --version
npm --version

How to use Bootstrap in Angular ?

Now basically there are two general methods to install Bootstrap:

1. Install bootstrap using normal method:

First of all create Angular new application, using angular CLI, you can check our blog on Angular | How To Setup Angular Project.

Now use this command to install Bootstrap using NPM, also use –save flag to save dependency in “package.json” file.

npm install --save bootstrap

This will install the updated version of the bootstrap. Once bootstrap is installed in your project, open the angular.json file and add Bootstrap CSS file paths under styles and JS files path under scripts arrays, which both are under the build target:

"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

That’s it!!!!! Now you can access all Bootstrap CSS and Bootstrap JS in your Angular Project.

2. Install bootstrap or NgBootstrap in your Angular project:

Here are some points to be noted in order to install ngBootstrap:

Ng-Bootstrap have a set of native Angular directives based on Bootstrap’s templates and CSS. And that’s why a result, no dependency on jQuery or Bootstrap’s JavaScript is required. Ng-Bootstrap is based on Bootstrap 4 and can be added to your Angular project in the following way.

Bootstrap must be installed when using ng-bootstrap because ng-bootstrap relies on Bootstrap’s CSS, however it replaces everything else that comes with Bootstrap, as you can see in their documentation. The CSS is then set in your angular.json or imported into the main styles.css

That said, the non-CSS parts of Bootstrap are unused and could be deleted, but if you’re using a package manager, e.g. NPM, this could cause issues when updating and you’ll need to repeat this process each update.

So if you are using ngBootstrap then no need to add “node_modules/bootstrap/dist/js/bootstrap.min.js” in your angular.json. This is an alternative to using the normal Bootstrap with everything, comes in bootstrap CSS, and it can be installed using NPM, details here.

As per the official documentation of ngBootsrap: https://ng-bootstrap.github.io/#/getting-started, below are the steps to follow for the installation of ngBootsrap in your Angular project.

1. After installation of your angular project with the above steps as mentioned, add the following command.

ng add @ng-bootstrap/ng-bootstrap

Add bootstrap and @ng-bootstrap/ng-bootstrap dependencies from npm

npm i --save bootstrap
npm i --save @ng-bootstrap/ng-bootstrap

In case you’re using CSS, you just need to add Bootstrap styles to your angular.json

"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": []
    },

If you’re using Angular ≥ 9.0.0 and ng-bootstrap ≥ 6.0.0, you also have to install the @angular/localize polyfill:

ng add @angular/localize

Add ng bootstrap in the main module file which is mainly app.module.ts:

import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;
@NgModule({
 imports: [NgbModule],
})

You are ready to work with ngBootstrap in your angular project.

Thank you for reading and stay tune, stay connected and stay safe. Please support us by sharing the blog.

Read our other blogs on ITbulls.in