Customizing Bootstrap 4
Please note that this section refers to Angular 2+ with Bootstrap 4. If you are using AngularJS 1.x with Bootstrap 3, please go to the Bootstrap 3 documentation.
Pro tip: don’t forget to run
yarn start to get immediate feedback of your changes!
The simplest way to customize how your JHipster application looks like is by
overriding CSS styles in
src/main/webapp/content/css/global.css, or if you selected the Sass option, the
Using Sass is both easier, more concise and more powerful than plain CSS because Bootstrap is also written in Sass, please refer to Bootstrap’s official documentation about theming .
If you want to use Bootstrap partials in your own
scss files then import it like below at the beginning of your
For example to use the border-radius mixin:
@import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins/border-radius";
Make sure you import only partials and not main Sass files, otherwise you will end up generating duplicate CSS which might cause issues.
To change the default Bootstrap settings like colors, border-radius, etc, add or change the value of the property in the partial file
All values defined in Bootstrap _variables.scss can be overwritten here.