JHipster is a web application generator using Spring Boot for backend and Angular for front End with multiple technologies.

Before starting you must have Sass support in your project

Link to Jhipster :
http://jhipster.tech/

MD Bootstrap provides various design components based on material design and layouts. You can check here :

Link to MD Bootstrap :

“https://mdbootstrap.com/getting-started/

So let’s start steps for integrating MD Bootstrap with JHipster

First create a directory in your system with name let myAPP or any you want.
CD using terminal or file explorer in your system into above created myApp folder.
Open terminal in myApp (If you have not JHipster setup follow link https://www.jhipster.tech/installation/).

Enter Command to generate JHipster project in your folder
yo jhipster

4. After JHipster is installed .

5. In same terminal give command for installing MD Bootstrap via NPM (Node Package manager)

npm i angular-bootstrap-md — save

6. In same terminal give command for installing external libraries

npm install -–save chart.js@2.5.0 font-awesome hammerjs

7. To app.module.ts add

import { NgModule,Injector,NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { MDBBootstrapModule } from ‘angular-bootstrap-md’;

@NgModule({
imports: [
MDBBootstrapModule.forRoot(),
],
schemas: [ NO_ERRORS_SCHEMA ]
});

8. To Vendor.scss add

/* 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/font-awesome/scss/font-awesome’;
@import ‘node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap’;
@import ‘node_modules/angular-bootstrap-md/scss/mdb-free’;

9. In angular-cli.json add

“styles”: [
“../node_modules/font-awesome/scss/font-awesome.scss”,
“../node_modules/angular-bootstrap-md/scss/mdb-free.scss”,
“./styles.scss”,
“content/scss/vendor.scss”,
“content/scss/global.scss”
],

“scripts”: [
“../node_modules/chart.js/dist/Chart.js”,
“../node_modules/hammerjs/hammer.min.js”
]

10. Add following into tsconfig.json file located in root folder

“inlcude”: [ “node_modules/angular-bootstrap-md/**/*.ts ”,
“src/**/*.ts”
]

11. Run in terminal to compile styles and scripts and inject to project

yarn webpack:build

12. That are all steps for integrating MD Bootstrap with Jhipster

Note : If you got any warnings in terminal after running yarn “webpack:build” then you can fix using tsLint manually

Note 2: If you got compile failed errors then you may have styles conflict
You can fix by removing normal bootstrap styles or comment it if you do not want to remove
//@import ‘node_modules/bootstrap/scss/bootstrap’;