How to Install Bootstrap in Angular?

Last Updated : 27 Dec, 2023

If you have completed your practice in the field of HTML & CSS and want to develop more interesting and attractive webpages in the future, moving ahead for the Bootstrap topic along with the Angular concept will be appropriate for you. However, to have Bootstrap on your Angular Project you should Install Bootstrap Framework on your IDE.

In this article, we will discuss the Bootstrap Framework Concept along with the effective steps required for the Installation of Bootstrap on any Angular Project.

What is Bootstrap Framework?

Bootstrap is a dedicated framework used for making more attractive webpages with the help of some style statements in the CSS. That means, in the CSS file you have to use Bootstrap to make webpages. It is an open-source framework that can be used with HTML, CSS & JavaScript templates in any project.

Features of Bootstrap:

It is an easy-to-use framework for the web development process.
Bootstrap can be used with any browser.
You can provide customized design in the Bootstrap.

Pre-requisite To Install Bootstrap in Angular

Installation of Bootstrap in Angular is a lot easier, but the main efforts you should invest in the pre-requisite. The installation of Bootstrap in Angular is a matter of executing one command. However, to do so, you have to get a lot of things done previously. Go through the following points as the pre-requisite of the Bootstrap Installation operation.

Get An IDE: Installation of Bootstrap can't be done in the simple Command Prompt or Terminal. You must use any IDE or Integrated Development Editor to install it. So, get an IDE like Visual Studio Code or similar to get ahead in the process.
Have A Git Account: Having a Git Account is a necessary thing. Installation of Bootstrap Requires the access of your Git Account. And whatever work you will do on Bootstrap gets synced in the GitHub account.
Have The NPM: The NPM(Node Package Manager) is necessary to get the Bootstrap in Angular. The NPM comes with Node.js which helps to install any packages with the help of the IDE Terminal.
Preinstalled Angular: As we are going to install the Bootstrap in the Angular Module, you should have the Angular installed on the IDE previously to access & create projects in the Bootstrap along with Angular.

How to Install Bootstrap in Angular?

Step 1: Open the Terminal in the IDE & execute the following command. It will install the Bootstrap on your project. There are two commands present. For installing the latest one, the first command should be used which is advisable to do so. For installing any old versions, you can go for the second command.

First Command for Latest Bootstrap Installation: npm install bootstrap --save

Second Command for Installing Old Versions: npm install bootstrap@version-number --save

1--Execute-Command

Step 2: It will take some time to complete the installation process.

2--Wait-For-Completion

Step 3: Now, under the Angular Modules folder, the Bootstrap Folder should be present as it is installed. From that folder, you can use any CSS file in your project.

3--Find-Bootstrap