Adding Bootstrap to Your Angular Project

Introduction

Bootstrap is a popular front-end framework that simplifies web development by providing pre-designed CSS and JavaScript components. Angular is used for building dynamic web applications. Combining these two technologies can enhance your Angular project’s user interface and make development more efficient. In this blog, we’ll walk you through the steps to add Bootstrap to your Angular project.

Prerequisites

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

1. Node.js and npm (Node Package Manager): Angular requires Node.js, and npm comes bundled with it. You can download them from the official node.js website.

2. Angular CLI (Command Line Interface): If you don’t have Angular CLI installed, you can install it globally using npm with the following command:

npm install -g @angular/cli

3. An existing Angular project or a new one created with Angular CLI:

ng new my-angular-project

Steps to Add Bootstrap to Your Angular Project

Now, let’s proceed with adding Bootstrap to your Angular project:

Step 1: Install Bootstrap

In your Angular project directory, use npm to install Bootstrap and its peer dependencies. Run the following command:

npm install bootstrap jquery popper.js

This command installs Bootstrap, jQuery (a JavaScript library required by Bootstrap), and Popper.js (a dependency for Bootstrap’s tooltips and popovers).

Step 2: Import Bootstrap CSS

To include Bootstrap’s CSS styles in your project, open the angular.json file in your project’s root directory. Locate the "styles" section and add the Bootstrap CSS file. It should look like this:

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

Step 3: Import Bootstrap JavaScript

Next, you’ll need to import Bootstrap’s JavaScript files. Open the angular.json file again and find the "scripts" section. Add the Bootstrap JavaScript files to it like so:

"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"
],

Step 4: Use Bootstrap Components

You’re now ready to use Bootstrap components in your Angular project. You can start by adding Bootstrap’s CSS classes and HTML structure to your components’ templates. For example, you can create a Bootstrap navbar like this:

<!-- app.component.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Angular App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Remember to import any required Bootstrap JavaScript functionality according to your project’s needs. Bootstrap documentation provides extensive guidance on how to use its components and JavaScript features.

Step 5: Run Your Angular Application

Save your changes and start your Angular development server using the following command:

ng serve

Your Angular application should now be running with Bootstrap styles and components integrated. Open your browser and navigate to http://localhost:4200 (or the URL specified in your console) to see Bootstrap in action within your Angular project.

Conclusion

By following these steps, you can easily add Bootstrap to your Angular project and take advantage of its pre-designed UI components and styles. Bootstrap simplifies the process of creating a visually appealing and responsive web application, allowing you to focus on the functionality and user experience of your Angular application. Enjoy building your Angular project with Bootstrap!

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency