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.
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
my-angular-app with the desired name for your project. Navigate to the project directory using the
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)
npm install popper.js jquery
angular.json configuration file.
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" ],
"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
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:
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.
Mukul Kandhari is an internet marketer, SEO, and web developer with a passion for programming.