How to install Bootstrap in Angular 8

This is a Quick and Easy tutorial about setting up Angular 8 and Bootstrap 4.

Create a new project

Open your favorite terminal and create a new project using Angular CLI

$ ng new my-app

During the setup, we’ll be asked about which stylesheet format we’d like to use, select SCSS: this is the format used by Bootstrap source files.

Some seconds later the new app will be ready.

Install bootstrap

Move into your project folder and install bootstrap using npm

$ npm install bootstrap --save

This will download the latest release of Bootstrap into your project’s node_modules directory and add it as a dependency into your package.json file.

Next step is asking Angular to compile Bootstrap during the build of our app. Edit angular.json to add bootstrap.scss under build -> styles

# angular.json

{
  ......
  "projects": {
    "my-app": {
      ......
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/scss/bootstrap.scss"

Styling Forms

Angular has a nice management of input states, adding some predefined classes when an input field is touched, modified or it’s value is failing the validation.

As a remainder, those classes are:

.ng-valid
.ng-invalid
.ng-pending
.ng-pristine
.ng-dirty
.ng-untouched
.ng-touched

Boostrap offers some nice looking styles for such states, it’s a good idea to map ng-* classes to Bootstrap ones.

To do this globally, open styles.scss under the src directory.

/* You can add global styles to this file, and also import other style files */

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/forms";

.ng-valid {
  &:not(.ng-untouched) {
    @extend .is-valid
  }
}

.ng-invalid {
  &:not(.ng-untouched) {
    @extend .is-invalid }
}

In the example above I’m extending Bootstrap’s .is-valid class into Angular’s .ng-valid, this will show the input green if the validation succeeded.

Since Angular applies its classes even before the form has been modified by the user, it’s a good idea to use the &:not(…) syntax.

Bootstrap components

Bootstrap offers a rich set of built in components such as modals, alerts, popovers, etc…

Instead of using the native implementation shipped by Bootstrap, I strongly suggest using ng-bootstrap: this library implements every Bootstrap component as Angular directives ready to be used in our templates.

The setup is very easy:

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

Every component has it’s own module: if you need modals import NgbModalModule, for alerts NgbAltertModule, etc… if you need to import EVERY component, you can include only NgbModule.

Take a look at the official documentation for details about components usage and options.