How to customize Bootstrap styles and variables when using ng-bootstrap
Published on November 28, 2017. Edited on December 25, 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": [
"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.
Latest blog posts
October 24, 2019
How to fetch your public photos from Instagram without the API
June 12, 2019
CodePen embeds with Contentful and Angular
March 26, 2019
Global HTTP request and response handling with the Axios interceptor
December 2, 2018
Setting up webpack 4 for a project
November 10, 2018
How to create Material Design like form text fields with floating label and animated underline bar
May 2, 2018
How to build a complete form with Vue.js
April 4, 2018
How to transfer the Angular server-side state to the client-side
March 28, 2018
My web developer career story
Latest CodePens
July 9, 2019
Switch between the dark and light mode via CSS custom properties
June 12, 2019
Javascript URL handling
June 9, 2019
Material Design like form input text fields with CSS only
March 27, 2019
Global HTTP request and response handling with the Axios interceptors
March 23, 2019
Navigation wizard example with equal width steps and flexible width of last step
March 23, 2019
Javascript event delegation example
December 9, 2018
Responsive and animated D3.js bar chart with positive and negative values (TypeScript)
November 11, 2018