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 install instructions 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.

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

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

// 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.

---

This blog post was originally published on Auralinna.blog