jhipster material bootstrap


 How to use Bootstrap Material Design with JHipster 5 If you’d like to use Bootstrap Material Design with JHipster 5, that’s possible too. Below are the steps necessary to use Bootstrap Material Design and Sass: 1. Install bootstrap-material-design: npm install bootstrap-material-design@4.1.1 2. Remove all variables from src/main/webapp/content/scss/_bootstrap-variables.scss. 3. Comment out the import for Bootstrap in src/main/webapp/content/scss/vendor.scss: // Import Bootstrap source files from node_modules // @import '~bootstrap/scss/bootstrap'; 4. Add the following to import bootstrap-material-design in src/main/webapp/content/scss/vendor.scss: // Import Bootstrap Material Design @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'); @import '~bootstrap-material-design/scss/bootstrap-material-design'; 5. Remove the following styles from global.scss: 

/* Error highlight on input fields */ .ng-valid[required], .ng-valid.required {   border-left: 5px solid green; } .ng-invalid:not(form) {   border-left: 5px solid red; } 6. Add the following overrides on the dropdown menus so they look good. The JHipster Mini-Book 20 .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active {   color: #fff !important; } .dropdown-menu .dropdown-item {   display: inline-block !important;   padding: 0.5rem 1.5rem !important;   min-height: 2rem !important; } Below is a screenshot taken after these changes


https://github.com/mraible/21-points

Σχόλια