How to install bootstrap in angular?

How to install bootstrap in angular?

In this article I will show you how to install bootstrap in Angular.

I also recorded a Video version of this Article. So you can watch my video from youtube to see more details:

I assume that you already have angular project installed.

In your project root directory run following command:

Loading...

Some of features of bootstrap depends on the jQuery.

image-10 (2).webp

With above command, it will install bootstrap and jquery in the node_modules folder

image-11 (1).webp

If you scroll down further, then you will also see jquery installed:

image-13 (1).webp

Also it will save the package name in the package.json file

image-12 (1).webp

After installing bootstrap we need to configure it to use in our angular project. For that open the angular.json file and add the path of bootstrap.min.css, jquery.min.js and bootstrap.min.js files as shown in screenshots below:

image-16.webp

This is how my entire angular.json file looks like now:

Loading...

After that, if your server is already running then stop it. And run the serve command to start the server again with the serve command:

Loading...

Remove all code from the app.component.ts file and add the following bootstrap related code to see if bootstrap is working fine:

Loading...

Now check app in the browser. You should see something like this:

image-17.webp

Now you can see that bootstrap styles and animations are working perfectly fine.

If you have any questions or you also want to share any suggestion then please leave your comments below. Also, share this article to help others.

I also have a Youtube channel where I keep recording a lot of useful content for you. So don’t forget to Subscribe to my channel and click on the bell icon to see all notifications.

Subscribe to my Youtube Channel AyyazTech