Steps For Integrating MD Bootstrap In Jhipster Project
Tags: design, angular, css, jhipster
Published: 2019-12-02 09:04:33

Hi everyone I a gonna share one of my first posts I written on Medium, I hope you all will like it useful. We were working with a Jhipster project and wanted to integrate MD Bootstrap that is a material design + Bootstrap framework.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/](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/](https://mdbootstrap.com/getting-started/)

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

1. First create a directory in your system with name let myAPP or any you want.
2. CD using terminal or file explorer in your system into above created myApp folder.
3. Open terminal in myApp (If you have not JHipster setup follow link https://www.jhipster.tech/installation/).
4. Enter Command to generate JHipster project in your folder```yo jhipster```
5. After JHipster is installed. In the same terminal give the command for installing external libraries```npm install -–save chart.js@2.5.0 font-awesome hammerjs```
6. To app.module.ts add```typescript
 import { NgModule,Injector,NO_ERRORS_SCHEMA } from ‘@angular/core’;
 import { MDBBootstrapModule } from ‘angular-bootstrap-md’;
 @NgModule({
 imports: [
 MDBBootstrapModule.forRoot(),
 ],
 schemas: [ NO_ERRORS_SCHEMA ]
 });
 ```
7. To Vendor.scss add```scss
/* 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’;
```
8. 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”
]
```
9. Add the following into tsconfig.json file located in root folder```“inlcude”: [ “node_modules/angular-bootstrap-md/**/*.ts ”,
“src/**/*.ts”
]```
10. Run in terminal to compile styles and scripts and inject to project```yarn webpack:build```

11. 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’;



Here is the link to my Git Repository with sample project integrated with MD BootStrap :
https://github.com/balvinder294/MaterialThemeJhipster

Thanks for reading. Hope I helped you. if you find it useful then write below and share your views, also let me know if anything needs to be updated if something not works, I will look into it.
Looking forward to sharing more with the community.

> Originally published at [Tekraze.com](https://medium.com/@erbalvindersingh/steps-for-integrating-md-bootstrap-in-jhipster-project-84e5d0cc9aa1)