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.
Table of Contents
TogglePrerequisites
Before you start, make sure you have the following installed on your system:
- Node.js (version 10.9.0 or later)
- 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.