8th Jan 2019

How to Add Bootstrap to an Angular Project

UI/UX

Written By, Nirav Nakrani

Creating an Angular project with Angular CLI

To create a new project write the below command in the terminal/command line.

ng new angular-bootstrap-example

Installing Bootstrap

We have two steps to add bootstrap in angular project

a: Installing Bootstrap from NPM

Next, we need to install Bootstrap. So, Type in your terminal cd for Example- cd angular-bootstrap-example press enters and type below command to install bootstrap :

For Bootstrap 3:
npm install bootstrap@3.3.7 ( install a particular version of bootstrap)
For Bootstrap 4:
npm install bootstrap (directly installed latest version)

b: Alternative – Local Bootstrap CSS

You can also download the Bootstrap CSS and add in your project. I have downloaded Bootstrap from the https://getbootstrap.com/ and added into src/assets/css/bootstrap.min.css

add_bootstrap_to_angular_image3

Importing the CSS

We have two variations to import bootstrap in angular project

a: If you have installed Bootstrap from NPM

just open the angular.json file and give your style path like below:

add_bootstrap_to_angular_image10

b: If you added the Bootstrap CSS file locally

just open angular.json file and give your style path like below:

add_bootstrap_to_angular_image8

How to use Custom CSS in Angular

Make one CSS file in your src/assets/css/custom-style.css

add_bootstrap_to_angular_image1

just open the angular.json file and give your style path like below:

add_bootstrap_to_angular_image6
Note: Your custom CSS should be last of other CSS

How to install Bootstrap JavaScript Components with ngx-bootstrap (Option 1)

In some case, you want to use models, accordion, dropdown without installing jquery. So, angular provides wrapper library for Bootstrap called ngx-bootstrap and that we can also install from NPM:

npm i ngx-bootstrap

Adding the required Bootstrap modules in app.module.ts

If you want to use any ngx-bootstrap modules so go through ngx-bootstrap and add the module you want and also add that module in your app.module.ts. For example, suppose we want to use the Accordion component:

add_bootstrap_to_angular_image2

.forRoot() is like a global scope to provide the functionality of all modules be available in all components.

How to install Bootstrap JavaScript Components with ng-bootstrap (Option 2)

If you use Bootstrap 4 in your project and also used models, accordion, dropdown without installing jquery. In case angular provides wrapper library for Bootstrap 4 is: ng-bootstrap and that we can also install from NPM:

npm i @ng-bootstrap/ng-bootstrap

you also need to import NgbModule, in app.module.ts :
Other modules in your application can simply import NgbModule app.module.ts:

add_bootstrap_to_angular_image5

add_bootstrap_to_angular_image11

If you want to use mdbootstrap

install mdb via NPM:
npm i angular-bootstrap-md

a: Add below code in you app.module.ts

add_bootstrap_to_angular_image4

b: Rename your style

rename /src/styles.css to styles.scss

c: Install external libs

npm install -–save chart.js@2.5.0 hammerjs

d: Add below lines to angular.json

add_bootstrap_to_angular_image7

e: ng serve

Conclusion

I hope that you will find this blog helpful for the novice for how to integrate external and custom CSS as well as JS in Angular.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd