[Ng-bootstrap](https://ng-bootstrap.github.io) is a great project which integrates Bootstrap 4 components into Angular. The main benefit is that it's not dependent on 3rd party Javascript libraries like jQuery or Bootstrap JS.

Installation is easy, but [install instructions](https://ng-bootstrap.github.io/#/getting-started) are missing important point how to make Bootstrap styles editable.

## Here are steps how to do it
These steps are for the Angular version 5 and expects that you use Angular CLI. Though upcoming and earlier versions should work as well.

Change Angular styles to use Sass by running following command or edit `.angular-cli.json` directly (styleExt).

```
ng set defaults.styleExt scss
```

Create folder called `sass` (or whatever you want to call your styles folder) under `src`. Create two files into `src/sass`; `styles.scss` and `_variables.scss`.

After this modify `.angular-cli.json` and change styles value to following.

```javascript
"styles": [
    "sass/styles.scss"
]
```

Import needed Bootstrap SCSS files into your `styles.scss` file.

```scss
// Custom variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/print";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
//@import "~bootstrap/scss/tables";
//@import "~bootstrap/scss/forms";
//@import "~bootstrap/scss/buttons";
//@import "~bootstrap/scss/transitions";
//@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
//@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";

// Customization
@import "my-component";
```

That's it! It's now possible to modify Bootstrap variables and select which components to use. Also you can add your own global custom components easily into project.

How to customize Bootstrap styles and variables when using ng-bootstrap

Ng-bootstrap is a great project which integrates Bootstrap 4 components into Angular. The main benefit is that it’s not dependent on 3rd party Javascript libraries like jQuery or Bootstrap JS. Installation is easy, but instructions are missing important point how to make Bootstrap styles editable. Here are steps how to do it.

Blog posts related to Bootstrap

How to customize Bootstrap styles and variables when using ng-bootstrap