How to Add Bootstrap CSS to an Angular Application

3 min readNov 3, 2024

Adding Bootstrap to an Angular application can significantly enhance the project’s design and responsiveness and can save you time by providing utility classes that you don’t need to write yourself. In this blog post, we’ll walk through the steps to integrate Bootstrap CSS into a sample Angular project.

Prerequisites

Before we start, ensure you have the following installed:

Step 1: Create a New Angular Application

First, create a new Angular application using the Angular CLI. We’ll use this application in a bit to add a small sample of Bootstrap code to show that the technique here is working correctly.

$ ng new angular-bootstrap-app

You’ll be prompted to add Server Side Rendering and Static Site Generation. For this demo, you can select Noas we’re not using those features. Next you’ll be asked which stylesheet format you wish to use. Again, its not that important for this demo, so select the default of CSS.

Step 2: Install Bootstrap

Navigate to your project directory and install Bootstrap via npm:

$ cd angular-bootstrap-app
$ npm install bootstrap

This will install the latest version of Bootstrap into the project. At the time of writing, this is version 5.2.3

Step 3: Configure Angular to Use Bootstrap

To include Bootstrap in the project, you need to update the angular.json file. This file provides the Angular configuration options for the project that are used at build time and by the Angular CLI.

Add the Bootstrap CSS file to the styles array and the Bootstrap JavaScript file to the scripts array (if you’re not sure of the names of these files, you can navigate through the node_modules folder and locate the files you wish to select):

{
  "projects": {
    "angular-bootstrap-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          }
        }
      }
    }
  }
}

These styles and scripts sections of the angular.json file define any additional CSS and JavaScript that can be used within the application. You’ll probably notice that the styles section already has one entry in it src/styles.css which is the default application style sheet for the project.

These entries require a css or js file relative to the root of the project — in this case, that starts with the node_modules directory.

Step 4: Use Bootstrap in Your Components

Now that Bootstrap is integrated, you can use its classes within Angular components. To show an example of this, change the contents of the src/app/app.component.html to include the following sample Bootstrap code:

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#helloWorld"
>
  Click Me!
</button>

<div
  class="modal fade"
  id="helloWorld"
  tabindex="-1"
  style="display: none"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="helloWorldTitle">Hello, World !</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body" style="min-height: 200px">
        <p>Here's a demo of using Bootstrap in an Angular project.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

This code adds a Button onto the application’s home page, which, when pressed, displays a Modal Dialog Box.

Step 5: Run Your Application

Finally, run the application to see Bootstrap in action:

$ ng serve -o

This command will package the Angular application (including Bootstrap) and open the default browser to view the application (by default, this will be http://localhost:4200.)

Conclusion

Integrating Bootstrap into an Angular application is straightforward and can be used to greatly enhance a project’s UI and imcrease your speed of development.

Happy coding!