How to use Bootstrap with Angular

Back to: Angular Tutorials For Beginners and Professionals

How to use Bootstrap with Angular

In this article, I am going to discuss how to use Bootstrap with Angular application. Please read our previous article where we discussed Angular Dependency Injection in detail. At the end of this article, you will understand How to install and use Bootstrap with Angular Application.

What is Bootstrap?

Bootstrap is an open-source repository that provides a couple of native angular widgets which are built using Bootstrap 4 CSS. As we know Bootstrap is one of the popular CSS framework which is used to build stylish and modern applications, which has HTML, CSS and JavaScript libraries.

Installing Bootstrap in Angular:

Now we will see how to install bootstrap in angular application. Create a new Angular 9 project using Angular CLI and Visual Studio Code. Once you created the angular application,then we need to install bootstrap and the required JQuery files. In order to intstall bootstrap, you need to use the following NPM command
npm install bootstrap@3 jquery –save

So, open visual studio code terminal window or you can even use windows command prompt and then navigate to the project folder and type npm install bootstrap@3 jquery –save command and press the enter button as shown in the below image. As Bootstrap have dependency on Jquery, so the below NPM command will install both Bootstrap and Jquery.

Once you press the enter button, it will take some time to install both bootstrap and JQuery into the node_modules folder. If you do not find the bootstrap and JQuery folder within the node_modules folder, then please restart visual studio code and you should find it.

Bootstrap Folder structure inside node_modules folder:

You can find the following bootstrap folder structure inside the node_modules folder.

JQuery Folder structure inside node_modules folder:

You can find the following JQuery folder structure inside the node_modules folder.

You can also verify whether bootstrap is installed on your project within the package.json file. Open package.json file of your application and then check for bootstrap and JQuery and you should find these in the dependencies section of the package.json file as shown in the below image.

Registering bootstrap in Angular:

In order to register bootstrap file, we need to include the path of Bootstrap CSS file in the styles array. Remember from Angular 6 onwards, the Angular CLI configuration file is renamed to angular.json from angular-cli.json. As we are working with angular 9, so you will find angular.json ffile. Open this file and modify the styles array as shown in the below image.

Registering Jquery in Angular:

Bootstrap depends on jQuery for some of it’s features. If you want to use those features, then please include the path to jQuery and Bootstrap jQuery files in the scripts array in the angular.json file as shown in the below image.

Importing bootsrtap into styles.css:

Open styles.css file and then copy and paste the following code.

/* You can add global styles to this file, and also import other style files */

@import '~bootstrap/dist/css/bootstrap.min.css';

Bootstrap Example:

Let modify the app.component.html file as shown below to create a simple button using bootstrap classes.

<button class="btn btn-primary">
  Bootstrap Button
</button>

At this point save all the changes, and run the application and you should the button element styles with bootstrap css as shown in the below image.

In the next article, I am going to discuss Angular Forms with examples. Here, in this article, I try to explain how to install and configure and use bootstrap in angular application. I hope you enjoy this article.