How to Install Bootstrap in Angular? Best 4 Ways

What is Bootstrap?

Bootstrap is an open-source front-end framework for building and designing various responsive web pages. It includes multiple CSS and JavaScript-based templates, responsive grids, in-built components, forms, buttons, navigation tools, a carousel, and other interfaces.  

Angular is a popular web application, a typescript-based open-source framework. Angular is a platform-independent language used on various systems such as desktop, mobile, laptop web, etc. 

Moreover, Angular has countless features such as high performance, speed, in-built frameworks, and components. Bootstrap is compatible with JavaScript, Angular, and React frameworks as well. Also, it has some useful developing tools that help the developers to create web pages with creative designs and templates. You can select the preferred templates and customize them manually by adding different components.  

With bootstrap, you must be comfortable with HTML, CSS, and JavaScript to pick the best templates and designs. Adding extra functionalities beyond the existing design is an effortless task. All you need to do is write code, check out the designs, write more code, and you are good to go. Sounds pretty interesting, right? It is. Go through the best course to learn Angular and find the relevant courses as per your interest.  

5 Ways to Include Bootstrap 4 In Your Angular Project 

Here, we will learn how to install bootstrap in Angular. Bootstrap helps you to style your application in a million different themes. You can add Bootstrap to your Angular project in a couple of ways to make your project more attractive and exciting simultaneously. Visit web development training course and learn development from scratch.  

Here, we will use the Angular CLI 13 to create a project from scratch. The process involves the following steps. Let us first list them down. 

1. Install Angular CLI 13 on your system to create a project 
2. Install Bootstrap 4 within your Angular project 
3. Add bootstrap in the project files 

Step 1- Installing Angular cli 13

The first step is to install Angular CLI 13 on your interface if it is not installed. You need to install the latest version of Angular CLI in a new and fresh command-line interface.  

Run the below command to install it- 

$ npm install -g @angular/cli 

If you are a macOS or Linux user, you must use sudo in front of the above command. Alternatively, you can use the command prompt with access to the admin to install Angular CLI 13 on your machine with a global scope. 

Once the installation process gets over, it will be stored in the ng utility disposal. Now, let’s create an Angular 13 project.  

Here’s the code that you must use to start a project 

$ ng new angular-bootstrap-examples 

You will encounter some questions that you need to answer accordingly. You need to select an appropriate CSS stylesheet format. This is because we will use the Bootstrap CSS part to include in our project. 

Once you have used the above commands, press Enter. Soon after this, your project will be created. It installs all the files and packages required to create your project. You will receive a message. 

Now, you need to enter the root folder. You can do this using the following command.  

$ cd angular-bootstrap-examples 

Use the ng serve command to serve the application using the below command.  

$ ng serve 

Your application will start running at port 4200 with the URL as http://localhost:4200/. 

Step 2- Install Bootstrap 4 in your Angular project 13 

Now, we will add Bootstrap to the project. For this, you need to install Bootstrap in the project. This can be done in multiple ways. Let’s see how.  

There are three methods as an answer for how to install bootstrap in Angular.  

They are as follows- 

• Using npm to install Bootstrap with the command- npm install 
• Installing bootstrap files to add them manually to the src/assets folder of the project. 
• We are using CDN to get the bootstrap. 

Let us use the first method that we listed above. Open your command-line interface and use the command- $ npm install bootstrap. 

You will find all the bootstrap files stored under the node_modules folder of your project. 

Step 3- Adding Bootstrap 5 to Angular CLI

Beneath this, we have another five ways to add bootstrap to the Angular CLI project.  

Adding bootstrap using the angular.json 

So, let’s start with our first method to add bootstrap through the angular.json file. Open the file and perform the following commands, 

node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array, 
node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, 
node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, 

After executing all the above codes, you will find the bootstrap file attached with your Angular project. 

Adding bootstrap using the index.html file

Here’s the second way to do the same task. You can use the index.html files by getting out the file from the node_modules/bootstrap file. You need to add some essential tags to your index.html file. The tags are as follows- 

• Add the bootstrap.css file under the <head> section using the <link> tag. 
• You can add the jquery using the <script> tag right before the <body> tag closes. 
• You can add the bootstrap.js file within the <script> tag right before the </body> tag. 

Adding bootstrap using the style.css file

Style.css is another way of adding the CSS files within the bootstrap of your Angular project. For this, please navigate to the style.css file under the src folder and import the bootstrap.css file inside it.  

Use the below command to import the bootstrap’s CSS file in it. 

@import "~bootstrap/dist/css/bootstrap.css." 

This file replaces all the other styles for which you do not need to add any other files.  

Adding Bootstrap using ngx bootstrap or ng bootstrap

Working with some of the bootstrap’s javascript features can be difficult. This is because it requires jquery and other libraries such as popper.js. Importing all these files could be hectic, right? We have an effortless solution to this problem.  

You can use the ngx bootstrap or the ng bootstrap directly with Angular. It covers all the essential libraries and dependencies. So, here’s what you need to do- 

Install the ng bootstrap library through the npm command 

$ npm install @ng-bootstrap/ng-bootstrap 

Once installed, import the library within the project’s main module.  

Import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

Then add the imported module to your root module folder 

You can use a diverse array of styles to make it look attractive. 

For ngx bootstrap, the steps are as follows- 

Open your terminal and use the below command to install ngx bootstrap on your machine. 

$ npm install ngx-bootstrap 

Now, you need the bootstrap CSS file. You can get it using the CDN 

Alternatively, install bootstrap within the angular-cli.json file 

"styles": [ 
"../node_modules/bootstrap/dist/css/bootstrap.min.css", 
"styles.css" ], 

Then make the relevant changes within the app.module.ts file. After completing all this, you are good to go. 

Adding Bootstrap using Schematics

With the addition of the ng add command in the Angular, the developers can now effortlessly add bootstrap to their Angular project without following the old way of npm install. 

The developers no longer need to depend on the npm install command to get all the required dependencies within their project. 

Here’s the alternative to that command. Use the below command statement to get Bootstrap attached to your project- 

$ ng add @ng-bootstrap/schematics 

Conclusion

Here, we have discussed a lot about how to install bootstrap Angular. Angular is the most used platform to create interactive user interfaces. Bootstrap is another widely used frontend framework with millions of styles and design templates.  

We have explained the significant ways to add bootstrap to your Angular project. You can follow any one of them to fulfill your task. It is straightforward to use in your project. You can add the bootstrap to the Angular to start building various Angular projects. So, that’s it for this article. 

Also, check out the KnowledgeHut’s best course to learn Angular course to get your hand on Angular and its properties.