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
Top comments (0)