How to add Bootstrap 4 and ng-bootstrap to your Angular CLI project

Updated June 21, 2018

This article helps you step by step to install Bootstrap 4 and ng-bootstrap to your Angular CLI project.

This article has been updated for Angular 6.

In my previous post I described how to add bootstrap 4 to your Angular CLI project with jQuery.
Using jQuery with Angular is not recommended, so here I will describe a better way to use Bootstrap with Angular.

There are two libraries that can handle the JavaScript code of Bootstrap 4.

ng-bootstrap by the Angular team.
ngx-bootstrap by Valor Software.

In this tutorial I will use ng-bootstrap of the Angular team.

First you need to decide if you want to use CSS or SASS (SCSS) for styling your pages. I give a walkthrough with both options.

Install Bootstrap 4 in Angular CLI with SASS (SCSS)

First we create a new project and tell angular to use SCSS for styling.

Open up your command prompt and enter:

ng new my-app --style=scss
cd my-app

Next we install Bootstrap 4 with npm.

npm install bootstrap  --save-prod

Create an empty file _variables.scss in src/.

In your project in styles.scss add the following:

@import 'variables';
@import '~bootstrap/scss/bootstrap';

Now you can use bootstrap to style your website. But the parts that use JavaScript are still not working. For this we will install ng-bootstrap.

To install ng-bootstrap run the following command in command prompt:

npm install --save @ng-bootstrap/ng-bootstrap

Now we need to import ng-bootstrap to our “app.module.ts“. Open the app.module.ts file. Add the imports statement as in the following code snippet and add to the imports array “NgbModule.forRoot()”.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...], 
 bootstrap: [AppComponent]
})
export class AppModule {
}

Restart ng serve to see the changes.

Read how to use ng-bootstrap at https://ng-bootstrap.github.io/#/components.

Install Bootstrap 4 in Angular CLI with CSS

Create a new Angular CLI project

ng new my-app
cd my-app

Install bootstrap 4 with npm:

npm install bootstrap   --save-prod

Open angular.json in your project.

Find the first styles section under the build node and add the following lines:

NOTE: there are two styles sections!! One under build and one under test. If necessary put these lines in both sections.

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