Reply To: Integrating MD Bootstrap in Jhipster


Hi Mohammed this issue maybe due to conflicting of bootstrap file provided by MD-Bootstrap with default bootstrap by Jhipster .

You should comment out or remove default bootstrap sass file used by default

/* after changing this file run 'yarn run webpack:build' */
$fa-font-path: '~font-awesome/fonts';
// Images Path for angular-bootstrap-md
$image-path: '../../../../../node_modules/angular-bootstrap-md/img' !default;
// Fonts Path for angular-bootstrap-md
$roboto-font-path: "../../../../../node_modules/angular-bootstrap-md/font/roboto/" !default;

put Sass variables here:
eg $input-color: red;
// Override Boostrap variables
@import "bootstrap-variables";
// Import Bootstrap source files from node_modules
//@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/font-awesome/scss/font-awesome';
@import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap';
@import 'node_modules/angular-bootstrap-md/scss/mdb-free';

/* jhipster-needle-scss-add-vendor JHipster will add new css style */

here is the code for vendor.scss you should use ..

You can also check my git repo for MD-Bootstrap integrated JHipster Application
>>>> Material Theme Jhipster Application

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More