💡The updated article for Angular CLI v6 can be found here

In this tutorial I explain how to add Bootstrap 4 and FontAwesome 4 to an app created with Angular CLI.

If you don’t have Angular CLI v1.5.0 or higher installed you can do so by npm install -g @angular/cli@latest (requires Node v6.9.0 or higher and NPM v3 or higher).

⚠️ Note: At the time of writing Bootstrap 4 is in beta ( 4.0.0-beta.2 ). That being said, the way we add and enable the library will be very similar throughout versions. I’ll try to keep the tutorial updated when Bootstrap changes.

What’s on the menu

We will scaffold a new app from scratch using Angular CLI.

Next we will add the Bootstrap and FontAwesome packages and configure them.

As a final step we will configure a base template and add some UI components that we can use in our app.

Scaffold a new project

First we will create a new project using ng new .

$ ng new tutorial-angular-cli-styling-bootstrap

$ cd tutorial-angular-cli-styling-bootstrap

The ng new command creates a new directory, scaffolds our new app inside that directory and installs the required packages using npm which can take a while.

Add and configure Bootstrap and FontAwesome dependencies

When we have our app created we run the following command to install our dependencies using npm.

$ npm install --save bootstrap@4.0.0-beta.2 font-awesome

Now that we have the dependencies in place, we can tell Angular CLI that it needs to load these styles by opening the file src/styles.css and adding the following two statements.

@import "~bootstrap/dist/css/bootstrap.min.css";

@import "~font-awesome/css/font-awesome.css";

You can start the project by running this command:

$ ng serve

If you load the app in the browser you should see the default welcome page with a sans-serif font