How to Add Bootstrap to an Angular Project

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.

mm

Nirav Nakrani Web Designer

I am Nirav Nakrani, working as a Web Designer at Yudiz Solutions Pvt. Ltd. - a leading mobile app, mobile games & software development company. I am fond of learning new design techniques and try to implement those which will help to improve my technical knowledge.

Leave a Reply

Top