Use of bootstrap theme on Jhispter?

Question

I'm not a pro with jhipster and web application programmation. So maybe my question is stupid, I would like to know if it's possible to use a Bootstrap theme like the one you can find here : link for Jhipster's homepage?

If yes what should I change to update the CSS in Jhipster and how should I adapt the JavaScript files?

If it's not possible with Bootstrap do you have something similar that can be used on Jhipster?

Here is my Jhipster version:

 {
  "generator-jhipster": {

    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "4.6.2",
    "baseName": "testdesign",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": "elasticsearch",
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "aba9f3a1b9b0feaa096db087cc1d692102a1f6b6",
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-primeng",
        "version": "2.0.53"
      }
    ],
    "enableTranslation": false
  }
}

Answer 1

JHipster does use Bootstrap already, and ng-bootstrap for angular widgets. In a generated project, look at the file src/main/webapp/content/scss/vendor.scss to see the import statement for bootstrap SCSS. Update this to link to your desired theme's scss files, and find where to add or replace references to additional javascript files. Make sure you're familiar with Angular and SCSS/SASS files first! :)

Answer 2

You need to import the necessary files of the theme you want. Most bootstrap themes are composed of CSS files and some JS mainly, etc.

Import those files in your jhipster project could do it through "vendor.ts", with the following steps.

1. Go to "myprojectjh\src\main\webapp\content".
2. Create a folder for your theme. (ex. "mytheme01").
3. Open the created folder and copy the necessary files of the theme (ex: "theme.css").
4. Go to "myprojectjh\src\main\webapp\app" and open the file "vendor.ts".
5. Write the following line to import the necessary files (ex: "theme.css"). import '../content/mytheme01/theme.css'.
6. Save the changes and run your application again.

Your file vendor.ts could look like this:

NOTE: Additionally, you can edit the file "_bootstrap-variables.scss" or "global.scss" to make some other necessary adjustments so that your theme is displayed correctly.

I hope that helps you.