How To Install Bootstrap in Angular

Bootstrap is a popular CSS framework that simplifies the process of developing responsive and mobile-first web applications. It provides a set of pre-built components, a responsive grid system, and utility classes that make it easy to create modern, visually appealing web applications. In this article, we will guide you through the process of installing Bootstrap in an Angular project step by step.

Prerequisites

Before you start, make sure you have the following installed on your system:

1. Node.js (version 10.9.0 or later)
2. Angular CLI (version 8.0 or later)

Step 1: Create a new Angular project

If you don’t have an existing Angular project, create one using the Angular CLI. Open your terminal or command prompt and run the following command:

ng new my-angular-app

Replace my-angular-app with the desired name for your project. Navigate to the project directory using the cd command:

cd my-angular-app

Step 2: Install Bootstrap

Install Bootstrap using the npm package manager. In the terminal or command prompt, run the following command:

npm install bootstrap

This command installs the latest version of Bootstrap in your Angular project.

Step 3: Install Popper.js and jQuery (optional)

Bootstrap’s JavaScript components rely on Popper.js and jQuery. Although these dependencies are optional, you may need to install them if you plan to use Bootstrap’s JavaScript features. To install Popper.js and jQuery, run the following command:

npm install popper.js jquery

Step 4: Include Bootstrap CSS and JavaScript files

To use Bootstrap in your Angular project, you need to include the Bootstrap CSS and JavaScript files in the angular.json configuration file.

Open angular.json in your preferred text editor or integrated development environment (IDE) and look for the “styles” and “scripts” arrays under the “build” and “test” configurations.

Add the path to the Bootstrap CSS file in the “styles” array:

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

If you have installed Popper.js and jQuery, add their paths along with the Bootstrap JavaScript file to the “scripts” array:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Save the changes to the angular.json file.

Step 5: Verify the Bootstrap installation

To verify that Bootstrap has been installed correctly, open the src/app/app.component.html file and replace its content with the following sample Bootstrap code:

<div class="container">
  <div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">Bootstrap is now installed in your Angular project.</p>
    <hr class="my-4">
    <p>Start building your responsive, mobile-first web application using Bootstrap and Angular.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </div>
</div>

Run the Angular development server with the following command:

ng serve

Open your browser and navigate to http://localhost:4200. You should see the sample Bootstrap content displayed on the page, indicating that Bootstrap has been successfully installed and integrated into your Angular project.