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.
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.
Be the first commenter?
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