HubSpot Style Guide: How to Add Bootstrap to Angular 2+

Following a Hubspot style of clear, step‑by‑step documentation, this how‑to walks you through adding Bootstrap to an Angular 2+ project so your app can use responsive, mobile‑first components quickly and reliably.

The process is straightforward once you understand how Angular builds and bundles your assets. In this guide, you will install Bootstrap, configure Angular to load its CSS and JavaScript, and verify that everything works in the browser.

What You Will Learn in This HubSpot Inspired Tutorial

This article is based on the original instructions from the HubSpot developer blog and will help you:

Install Bootstrap and its dependencies in an Angular 2+ project
Configure the Angular build so styles and scripts load correctly
Use Bootstrap classes in your templates
Troubleshoot common configuration mistakes

Before you start, you should have Node.js, npm, and the Angular CLI installed, and you should be comfortable running commands in a terminal.

Step 1: Create or Open Your Angular Project (HubSpot Style Setup)

If you do not yet have an Angular project, create one using the Angular CLI. This mirrors the kind of clear setup pattern you might see in HubSpot technical documentation.

Open a terminal or command prompt.
Run the following command to generate a new app:
```
ng new my-bootstrap-app
```
Move into the project folder:
```
cd my-bootstrap-app
```

If you already have an Angular project, simply navigate to its root folder in your terminal.

Step 2: Install Bootstrap and Dependencies Using a HubSpot Friendly Workflow

The next step is to install Bootstrap into your Angular project. The original HubSpot tutorial shows how to use npm to bring in the package.

In the root of your Angular project, run:
```
npm install bootstrap --save
```
If you plan to use Bootstrap JavaScript components such as modals or dropdowns, you will also need dependencies like Popper. For example:
```
npm install @popperjs/core --save
```

Once the installation finishes, Bootstrap’s files will be available in your node_modules directory, ready to be wired into your Angular build process.

Step 3: Configure Angular to Load Bootstrap (HubSpot Documentation Pattern)

Bootstrap will not affect your Angular components until you import its CSS (and optionally JavaScript) into the bundle created by the Angular CLI. This step mirrors the configuration section of the HubSpot source article.

Adding Bootstrap CSS the HubSpot Way

Angular projects managed by the CLI include an angular.json file in the project root. This file controls which style sheets and scripts are included in the build.

Open angular.json in your code editor.
Locate the "styles" array inside the build options of your main project target.

Add the Bootstrap CSS path from node_modules. It typically looks like this:

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

By listing the Bootstrap stylesheet before your own styles, you can override Bootstrap defaults from your application CSS if needed.

Adding Bootstrap JavaScript Like a HubSpot Engineer

If you only need the grid system and basic styling, the CSS import is enough. For interactive features such as tooltips, dropdowns, and modals, you must also add Bootstrap’s JavaScript (and its dependencies) to the scripts array.

In angular.json, locate the "scripts" array.

Add the relevant script paths, for example:

"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

When Angular builds your project, it will now bundle these files into the final JavaScript that is delivered to the browser.

Step 4: Restart the Angular Development Server

Whenever you change angular.json, you should restart the development server so the new configuration takes effect. This is a simple but important step highlighted in the original HubSpot article.

If your dev server is running, stop it with Ctrl + C in the terminal.
Start it again with:
```
ng serve --open
```

Your browser will open (or refresh) at the local development URL, usually http://localhost:4200. Now you can verify that Bootstrap is active.

Step 5: Verify Bootstrap Is Working in Your Angular App

To confirm that everything is configured properly, use a few Bootstrap classes in one of your application templates. This mirrors the test approach advocated in HubSpot tutorials.

Open src/app/app.component.html (or any component template).

Replace the default content with a small Bootstrap layout, for example:

<div class="container mt-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card">
        <div class="card-body">
          <h1 class="display-4 text-center">Angular + Bootstrap</h1>
          <p class="lead text-center">
            If this text is styled and centered, Bootstrap is running correctly.
          </p>
          <button class="btn btn-primary btn-block">Test Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

When you save the file, the dev server will recompile your project and refresh the browser. If the heading, text, and button appear styled in the familiar Bootstrap design, your setup is successful.

Common Issues and Fixes in a HubSpot Style Troubleshooting Section

Even with a clear process, a few frequent issues can appear when you add Bootstrap to Angular. The troubleshooting mindset used in HubSpot documentation can help you quickly identify and fix problems.

Bootstrap Styles Not Showing

Check the path in angular.json: Verify that the path to bootstrap.min.css exactly matches the folder structure in node_modules.
Check that the style is in the right section: Ensure the Bootstrap stylesheet is inside the correct architect > build > options > styles array for the main project, not in a test configuration.
Restart the dev server: After any change to angular.json, stop and restart ng serve.

Bootstrap JavaScript Components Not Working

Confirm dependencies: Many Bootstrap JavaScript features depend on Popper. Make sure you installed and loaded the correct Popper script before the Bootstrap script.
Check script order: In the scripts array, helper libraries like Popper should come before bootstrap.min.js.
Look for console errors: Open your browser’s developer tools and check the console for missing file or reference errors.

Learn More with Official Resources and HubSpot Style References

For a deeper dive into the original explanation, you can review the source article that inspired this guide on the HubSpot blog: How to Add Bootstrap to Angular 2.

If you need broader help with implementation, optimization, or extending this setup into a larger project, consider working with a specialized consultancy such as Consultevo, which focuses on technical strategy and scalable solutions.

Conclusion: Bringing a HubSpot Level of Clarity to Angular and Bootstrap

By following this clear, HubSpot inspired checklist, you can confidently integrate Bootstrap into any Angular 2+ project:

Create or open your Angular app with the CLI.
Install Bootstrap and required dependencies with npm.
Add Bootstrap CSS and optional JavaScript in angular.json.
Restart the Angular development server.
Verify styling and components in your templates.

With this foundation in place, you can build responsive, production‑ready interfaces faster, while keeping your Angular codebase clean and maintainable.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

HubSpot Guide: Add Bootstrap to Angular