CODEWITHSUNDEEP
twitter-bootstrapmaterial-designbootstrap-4
Roman
Roman

Reputation: 303

How to use Material design with bootstrap 4

I am developing a web app, I have been using bootstrap-4 features, then I decided to add material design library to have more features, but unfortunate some features have changed on my page like text colors, font size and buttons appearance. I got confused with this, Is there any rule for may be arrangement of calling the links and scripts files of both bootstrap-4 and material design? or something else regarding on the usage of these frameworks?

Upvotes: 3

Views: 3497

Answers (2)

WasiF
WasiF

Reputation: 28847

This is a step by step method to use Material with Bootstrap 4

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: 

cd your-angular-project

Step 3: GitHub npm install

npm i angular-bootstrap-md --save

Step 4: to app.module.ts add

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

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

Step 5: Make sure that styleExt is set to "scss" in angular-cli.json file, if not change:

"styleExt": "css" to "styleExt": "scss"

Step 6:

Make sure you have . If you have src/styles.css instead, rename it to .scss.

if you want to change styles in existing project you can use ng set defaults.styleExt scss

Step 7: add below lines to angular-cli.json:

"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "./styles.scss"
],
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  "../node_modules/hammerjs/hammer.min.js"
],

Step 8: Update ts.config.json file, add following into tsconfig.json file located in root folder

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],

Step 9: install external libs

npm install -–save [email protected] font-awesome hammerjs

Step 10: Run server

ng serve --open

for manual and npm configuration, https://mdbootstrap.com/angular/5min-quickstart/

for documentation, https://mdbootstrap.com/, after opening this page, go down you'll find like that and click to see documentation

enter image description here

Upvotes: 1

Vikas Yadav
Vikas Yadav

Reputation: 3356

Please have a look at Material by Daemonite.

Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design. This lightweight framework is built using Bootstrap 4.

Link :https://github.com/Daemonite/material

Upvotes: 1

Related Questions