- Tero Auralinna's web development blogAuralinna.blogTero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.

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

Published: 11/28/2017

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": [

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.

Be the first commenter?

Latest CodePens

I am an experienced web developer with an eye for solid UI/UX design. I have specialized in front-end development, responsive web design, design systems, modern web frameworks, and content management systems. I also have experience in mobile apps development and back-end coding with PHP, Node.js, and Java. So I have a full stackish background, but I'm enjoying most building robust and beautiful front-ends with performance, accessibility, and testability in mind.

© Tero Auralinna

Auralinna.fiSunset with Bubbles: Travel and Photography Blog

The icon "ellipsis" is provided by