Loading

Angular

How to use Bootstrap with Angular?. The Complete Angular Developer Course 2022 [Videos].

In this Video, I am going to discuss how to use Bootstrap with Angular application. Please watch our previous Video where we discussed Angular Dependency Injection in detail. At the end of this Video, 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.

Installing Bootstrap in Angular

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.

Bootstrap Folder structure inside node_modules folder

JQuery Folder structure inside node_modules folder:

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

JQuery Folder structure inside 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.

How to use Bootstrap with Angular

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 bootstrap in Angular

Registering Jquery in Angular:

Bootstrap depends on jQuery for some of its 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.

Registering Jquery in Angular

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.

See All

Comments (402 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /402

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /402

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /402