How to Install Bootstrap in Angular? Top 5 Ways

Integrating Bootstrap may significantly improve the design and responsiveness of your Angular applications. Bootstrap has a large number of pre-designed components and utility classes that help developers create visually appealing and user-friendly interfaces. 

In this article, I will walk you through the steps to install Bootstrap in Angular and add it to your project. Whether you're starting a new project or want to improve an existing one, this article will help you smoothly install Bootstrap in Angular and integrate its rich features into your application.

By the end of this blog, you will be able to effortlessly design amazing, responsive web applications. Let's get started.  

Prerequisites for Installing Bootstrap in Angular

Before you begin the task to install Bootstrap in Angular, you must check whether the prerequisites are in place. Here's all you need: 

1. Node.js and npm: Make sure your system is installed with both Node.js and npm (Node Package Manager). 
2. Angular CLI: The Angular Command Line Interface (CLI) is a powerful tool for setting up, creating, and managing Angular applications. 

npm install -g @angular/cli 

1. Basic Knowledge of Angular: An understanding of the fundamental ideas of Angular, including modules, components, and services, is essential. 
2. A Code Editor: For the purpose of working on your Angular project, you will require a code editor. Popular options include Sublime Text, WebStorm, and Visual Studio Code. 

Top Ways to Include Bootstrap 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. 

Here, we will use 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 to 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 is 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/. 

Check Out upGrad’s Software Development Courses to upskill yourself.

Step 2- Install Bootstrap 4 in your Angular Project 13

Now, we will add Bootstrap to the project. To do this, you need to install Bootstrap for 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- 

• Use npm to install Bootstrap with the command- npm install 
• Install bootstrap files and manually add them to the project src/assets folder. 
• 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 your project's node_modules folder. 

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 to 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 command below to import the bootstrap’s CSS file. 

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

This file replaces all the other styles, so 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 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 

Installing Bootstrap via CDN 

Using a Content Delivery Network (CDN) is the simplest way to integrate Bootstrap into your project. 

1. Open your HTML file 
2. To include Bootstrap CSS, add the following tag in the section: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous"> 

  3. To include Bootstrap JS and its dependencies, add the <script> tag, just before the closing <body> tag. 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous"></script> 

This method is simple and ensures you're always using the most recent version of Bootstrap. 

Installing Bootstrap Via the npm Package Manager 

Using npm (Node Package Manager) provides a more modular and practical approach. 
Step by step instruction:

1. Ensure that Node.js and npm are installed. If not, install them from the Node.js official website. 
2. Open your VS Code terminal or the system’s terminal and navigate to the project directory. 
3. Set up npm in your project: 

npm init -y 

  4. Install Bootstrap: 

npm install bootstrap 

  5. Import Bootstrap into your main CSS or SCSS file, Paste this line at the top of the file: 

@import 'node_modules/bootstrap/scss/bootstrap'; 

If you're using JavaScript, import it into the main JS file: 

import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap/dist/js/bootstrap.bundle.min'; 

This method is best suited for projects that require close coordination and dependency management. 

Installing Bootstrap via Bower package manager 

1. Make sure you have Bower installed. If not, install it with npm: 

npm install -g bower 
bower init 

   2. Install Bootstrap using Bower 

bower install bootstrap 

  3. Connect the Bootstrap files in your HTML file: 

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">  
 
<script src="bower_components/bootstrap/dist/js/bootstrap.bundle.min.js"></script> 

Bower is less common today, but it is still useful for managing front-end libraries. 

Installing Bootstrap via a Custom Build 

Creating a custom Bootstrap build allows you to integrate only the components you need, resulting in smaller CSS and JS files and faster build times. 

1. Visit the Bootstrap official website and explore the "Customize" section by scrolling down. 
2. Use the choices for customization to choose the components, utilities, and settings that you require. 
3. Download the custom Bootstrap build extract the downloaded files and place the CSS and JS files in your project's directory. 
4. Now, link the custom Bootstrap files in your HTML in the <style> tag and just before the <body> tag respectively: 

<link href="path/to/your/custom/css/bootstrap.min.css" rel="stylesheet">
<script src="path/to/your/custom/js/bootstrap.bundle.min.js"></script>

Best Practices to Follow When Installing Bootstrap 

When you install Bootstrap in Angular and incorporate it into your project, the following best practices guarantee that your application is maintainable, scalable, and efficient. 

1. Use the Angular CLI for installation: Use the Angular CLI to add Bootstrap to your project. This guarantees that dependencies are properly maintained and integrated into the project's structure. 

npm install bootstrap 

2. Import Bootstrap for Angular Styles: Import bootstrap in the global styles file (src/styles.scss or src/styles.css). 

/* styles.scss */ or /* styles.css */ 

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

3. Use Angular’s ng-bootstrap or ngx-bootstrap: Consider libraries that provide Angular-friendly Bootstrap components, such as ng-bootstrap or ngx-bootstrap.  

ng add @ng-bootstrap/ng-bootstrap 

or  

npm install ngx-bootstrap 

4. Keep Bootstrap and its dependencies updated: To make use of the most recent features, improvements, and security updates, update Bootstrap and its dependencies on a regular basis. 

 npm update bootstrap 

Conclusion

Here, we have discussed a lot about how to install Bootstrap Angular. Angular is the most used platform for creating 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 Angular to start building various Angular projects. So, that’s it for this article.

You can reinforce your resume as a full-stack developer by pursuing courses like Full Stack Software Development Bootcamp and AI Powered FSD Course by IIITB. These courses impart the in-demand full-stack development skills that help you explore outstanding job opportunities like full-stack developer, frontend developer, backend developer, and UI developer.

Boost your software engineering skills with our top programs. Explore the courses below to find the right fit

Explore our Popular Software Engineering Courses

Master in-demand software skills with our specialized courses. Explore your options below to upskill today.

In-Demand Software Development Skills