Bootstrap is a CSS framework that gives you ready-made styles and components such as buttons, grids, cards, forms, alerts, and modals. In Angular, the most reliable setup is to install Bootstrap with npm and then register its CSS and JavaScript files in angular.json.

Table of Contents

This guide also shows how to add Font Awesome icons and a Google Font globally.

Prerequisites

Before starting, make sure you already have an Angular project.

bash
ng new my-bootstrap-app
cd my-bootstrap-app

If your project already exists, open a terminal inside the project root. This is the folder that contains angular.json and package.json.

Step 1: Install Bootstrap and Font Awesome

Install Bootstrap and Font Awesome from npm:

bash
npm install bootstrap @fortawesome/fontawesome-free --save

This adds both packages to package.json and downloads them into the node_modules folder.

Bootstrap provides the UI styles and JavaScript behavior. Font Awesome provides icon classes such as fa-solid fa-user.

Step 2: Configure styles and scripts in angular.json

Open angular.json and find the project build configuration:

json
"architect": {
    "build": {
        "options": {
            "styles": [],
            "scripts": []
        }
    }
}

Add Bootstrap and Font Awesome to the styles array. Add Bootstrap’s bundle file to the scripts array:

json
"styles": [
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]

If your project uses SCSS, the global stylesheet may be src/styles.scss instead of src/styles.css. Keep the file name that already exists in your project.

The Bootstrap bundle includes the JavaScript required by components such as dropdowns, modals, offcanvas panels, tooltips, and collapses.

Step 3: Restart the Angular development server

After editing angular.json, stop and restart the Angular server. Angular does not always reload configuration changes while the server is running.

bash
ng serve

Open the application in the browser:

text
http://localhost:4200/

Step 4: Test Bootstrap

Open app.component.html and add a Bootstrap button:

<button type="button" class="btn btn-success">Click Me</button>

If the button appears green, Bootstrap CSS is working.

You can also test a Font Awesome icon:

<i class="fa-solid fa-house"></i>

If the house icon appears, Font Awesome is working.

Step 5: Add a Google Font

Go to Google Fonts and search for the font you want. For example, you can use the Ubuntu font.

Copy the @import code from Google Fonts and paste it at the top of your global stylesheet, such as src/styles.css or src/styles.scss.

css
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");

body {
    font-family: "Ubuntu", sans-serif;
}

This makes the font available across the whole Angular application.

You can also add Bootstrap, Font Awesome, or Google Fonts through CDN links in src/index.html. This is quick for demos, but npm installation is better for real Angular projects because dependencies are versioned in package.json.

Example CDN placement:

<head>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
    />
</head>

Use either npm configuration or CDN links. Avoid loading the same library both ways because it can increase page size and sometimes create style conflicts.

Common mistakes

  • Editing the wrong styles array in angular.json. Make sure you edit the one under the correct project and build target.
  • Forgetting to restart ng serve after changing angular.json.
  • Using styles.css in the config when the project actually uses styles.scss.
  • Adding Bootstrap JavaScript but forgetting Bootstrap CSS.
  • Loading Bootstrap from both npm and CDN at the same time.

Final check

Your setup is complete when:

  • npm install finishes without errors.
  • angular.json includes Bootstrap and Font Awesome paths.
  • ng serve runs successfully.
  • Bootstrap classes such as btn btn-success apply correctly in the browser.