# How-to use Material Design for Bootstrap (MDB) UI Kit with Pinegrow
**URL:** https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990
**Category:** Tutorials
**Created:** [April 21, 2020, 1:00pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990 "2020-04-21T13:00:18Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)
#### Post date: [April 21, 2020, 1:00pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/1 "2020-04-21T13:00:18Z")
This tutorial is now available from: [https://pinegrow.com/tutorials/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/](https://pinegrow.com/tutorials/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/)
Have questions or comments about this tutorial? Let’s talk about it!
---
### Author:  [@alexey](https://forum.pinegrow.com/u/alexey)
#### Post date: [April 22, 2020, 3:59am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/2 "2020-04-22T03:59:35Z")
Thank you very very much for MDB!!! It’s magic!!!
---
### Author:  [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)
#### Post date: [April 22, 2020, 8:44am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/3 "2020-04-22T08:44:42Z")
Glad you find this tutorial useful! 😉
---
### Author:  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [April 22, 2020, 10:12am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/4 "2020-04-22T10:12:00Z")
Thanks for the nice tutorial!
Only wish they made separate CSS for every module. If you only use one block it cost you 271kb!
With the Pro version it’s even more with JavaScript etc.
I suppose there is no way to get the individual CSS an JavaScript for individual blocks?
Then I prefer the way @BenHanna has made the blocks, with individual CSS blocks that you can copy to your main CSS!
Regards,
David
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [April 22, 2020, 2:26pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/6 "2020-04-22T14:26:04Z")
> [@AllMediaLab](#):
>
> Only wish they made separate CSS for every module. If you only use one block it cost you 271kb! With the Pro version it’s even more with JavaScript etc. I suppose there is no way to get the individual CSS an JavaScript for individual blocks?
>
> Then I prefer the way @BenHanna has made the blocks, with individual CSS blocks that you can copy to your main CSS!
Hopefully that will be addressed soon through this upcoming discussed feature by @matjaz ?
> > [@What extensions the Pinegrow team is working on](https://forum.pinegrow.com/t/what-extensions-the-pinegrow-team-is-working-on/3845/1):
> >
> > Improved Blocks / Components where it will be possible to have per-component style / JS and only include that in the project if the component is actually used. This feature will also make it easier for other developers to create libraries with reusable blocks / components.
> [@What extensions the Pinegrow team is working on](https://forum.pinegrow.com/t/what-extensions-the-pinegrow-team-is-working-on/3845/16):
>
> @matjaz, Will this improvement finally be somewhat relative to what was discussed back in 2016? thinking crossed_fingers
---
### Author:  [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)
#### Post date: [April 22, 2020, 2:41pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/7 "2020-04-22T14:41:02Z")
@AllMediaLab It is possible to customize the mdb-free.scss and remove the parts you don’t want / need.
I haven’t looked at the details, but I guess it is also possible to tweak the JS file.
---
### Author:  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [April 22, 2020, 3:41pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/8 "2020-04-22T15:41:37Z")
Hi Emmanuel,
Thanks for pointing that out!
Would the compiling be easy in Pinegrow? I see some core SCSS stuff that I’m not sure on how to use that! Is this all needed? That’s still a lot! 133kb before compiling.
// CORE
@import “core/mixins”;
// Your custom variables
@import “custom-variables”;
@import “core/colors”;
@import “core/variables”;
@import “core/global”;
@import “core/helpers”;
@import “core/typography”;
@import “core/masks”;
@import “core/waves”;
Regards,
David
---
### Author:  [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)
#### Post date: [April 22, 2020, 3:53pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/9 "2020-04-22T15:53:09Z")
Pinegrow will compile the SASS file and will generate the CSS.
---
### Author:  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [April 22, 2020, 4:05pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/10 "2020-04-22T16:05:55Z")
Yes I understand, but the core is so huge that you don’t gain any bandwidth by compiling only the blocks you want. Most blocks are between 2 kB and 4 kB with one exception the forms 16kB.
That’s what I don’t like about these kind of frameworks! The way @BenHanna made the extensions is that you have the individual CSS for each block, that’s much better.
If the MDB was not so bloated I would purchase the Pro version, but considering € 200,- for a framework that is based on a Bootstrap version that has come to it’s end!? 🙄
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [April 22, 2020, 10:13pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/11 "2020-04-22T22:13:18Z")
@AllMediaLab, Thats why what I referenced above remains an important part of workflows, given the abilities present. Time will tell, it doesnt seem to be something they wish to discuss or comment on much.
---
### Author:  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [April 23, 2020, 8:17am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/12 "2020-04-23T08:17:38Z")
I think the developers of Pinegrow are open for any discussion! Have a lot of wishes too, but not everything can be done when we want it.
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [April 23, 2020, 12:37pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/13 "2020-04-23T12:37:23Z")
> [@AllMediaLab](#):
>
> I think the developers of Pinegrow are open for any discussion! Have a lot of wishes too, but not everything can be done when we want it.
The point is @matjaz himself has now discribed they are working on something(?) as referenced above in his own words. But yes I understand [not all things are applicable](https://forum.pinegrow.com/t/import-pinegrow-huge-project-from-mac-to-windows-unworkable/3986/5) in app as you know (hopefully that service solution works for you however).
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 15, 2020, 3:01am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/14 "2020-06-15T03:01:14Z")
Thanks a bunch @Emmanuel for this excellent tutorial.
I’m a little stuck mid-way. So, once I finish organising my mdb template (named it **mdb\_pg\_template** ), how do I use it in new/existing projects?
1. To use the above template in a **new project** , is there a way to do this in PG (or) the only way is to duplicate the mdb template folder in my mac finder & open the replicated folder in PG as new project?
2. To add the above template to an **existing project** , is it done by clicking on the activate button in the below screenshot? When I did, no resources got added to my index.html page. Would be great if you can extend your tutorial to set the resources for the mdb template project choosing the necessary resources - **is it just one css & one js file (or) should it include the sass file as well?**
---
### Author:  [@DavidK](https://forum.pinegrow.com/u/DavidK)
#### Post date: [July 17, 2020, 1:09am UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/15 "2020-07-17T01:09:33Z")
I followed the tutorial, and it works great. Now, I want to upgrade to a newer version of MDB. How best to do the update? Can anyone help with this?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 17, 2020, 1:25pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/16 "2020-07-17T13:25:16Z")
Which version do you want to use? Updating to use MDB 5 means you might run into difficulties as it is a newer version of Bootstrap than PG currently supports.
---
### Author:  [@DavidK](https://forum.pinegrow.com/u/DavidK)
#### Post date: [July 17, 2020, 2:41pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/17 "2020-07-17T14:41:12Z")
I currently have 4.18. I want to upgrade to 4.19, and I wish to keep the same folder structure as done in the Pinegrow tutorial. Thank you for responding.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 17, 2020, 5:10pm UTC](https://forum.pinegrow.com/t/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/3990/18 "2020-07-17T17:10:11Z")
The easiest, if you want everything the same (using SCSS) with the new version, would probably be to just follow the tutorial again, but with the newer version downloaded.