Material Design for Bootstrap (MDB) is available for jQuery, Angular , React and Vue however, in this tutorial we will focus only on the jQuery version.

Material Design for Bootstrap is free for personal and commercial use and if you want to go any further, you can consider purchasing the PRO version which contain even more goodies, scripts and components.

The process we are going to detail is valid for both the FREE and PRO versions. It is up to you to choose the version that will best suit your projects and/or your budget.

Disclaimer

The following is a series of methods, tips and tricks to best organize your web project using MDB FREE and Pinegrow Web Editor.

Of course, if you are an advanced user, you may decide to do things differently.

Pinegrow has no affiliate relationship with MDBootstrap.com.

Getting the free version of the MDB framework

To download the free version of the MDB Framework, go to the MDB Website.

Select the DOWNLOAD ZIP button.

Preparing the MDB framework for your next web project

You can use the MDB framework as is, directly in Pinegrow, however, we recommend to proceed to a few changes so your project will be well organized. Showing how to do that is the main purpose of this tutorial.

By default, the MDB framework uses minified versions of the CSS files. Because we believe minification is one the very last step of the development phase, we will use the un-minified version of the CSS which we will associate to its SASS source file that Pinegrow will compile on the fly when we make changes.

Start Pinegrow.

From the Pinegrow dashboard view > Select Open Project.

Read carefully and Say OK to the useful Tip provided by Pinegrow. This is an invitation to ATTACH the mdb.css to your index.html file.

Click on Attach to index.html.

Save your project. Optionally, you can create a copy so that you can start your future projects with this modified version.

Working with Pinegrow and MDB

Within Pinegrow Web Editor, Material Design for Bootstrap can be used in two ways which can be combined depending on your needs.

Method 1 – Using Pinegrow Bootstrap components and tools

You can use Bootstrap 4 components available from the Pinegrow library in the same way you would when working with any other Bootstrap 4 project.

This lets you to build your site with ease. The standard Bootstrap 4 components will be automatically styled with the MDB styles.

Read more about how to use Pinegrow to build websites.

Method 2 – Copy code from MDB website

Another method is to follow the documentation available from the MDB website and use the available code snippets by copy/pasting them via the super useful Insert code option in Pinegrow.

You will be able to easily import the sample code as needed and eventually create your own components that you will even have the opportunity to reuse in other future projects thanks to Pinegrow smart components feature.

Again, let’s try with a custom Jumbotron component.

Go to https://mdbootstrap.com/docs/jquery/components/jumbotron/

Pro TIP This way of copy / pasting code snippets with Insert Code is not reserved to MDB code snippets. You can copy / use snippets from any origin.

Customizing the MDB framework using SASS and Pinegrow

This is one of the most important feature with MDB, you have full access to the SASS source files (see the first part of this tutorial) so you can fully customize the components styles and colors.

Here is an interesting read about using SASS in a web project: 7 benefits of using SASS over conventional CSS

To proceed, you will have to edit the code of one of the many SASS includes files available from the STYLESHEETS preview.

The customization options are extremely numerous and it is not the purpose of this tutorial to detail them all but as an example, here is how to change the background color for the PRIMARY elements (buttons and so on).

MDB documentation + the comments available in the SASS source files, you can find your way.

A tip: Use the Active tab of the Style panel to see what SASS variables affect the styling of the selected element. Right-click on the variable and select “Edit variable” to change its value.

Discuss this tutorial

Have questions or comments about this tutorial? Let’s talk about it on our forum.

Get in touch

Would you like to see a particular topic featured in the next tutorial? Let us know in the forum or by email!