Existing Project: Migrating from Material Design Bootstrap F

Topic: Existing Project: Migrating from Material Design Bootstrap Free to Material Design Bootstrap Pro with custom SASS compilation

Brainformance asked 3 years ago

For our project we have to migrate from an existing installation with MDB Free to MDB Pro. This is because we need various pro components. In the existing project we are building the SASS ourselves, because we do a lot of different variables.


$theme-colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: (
    "primary":    $primary,
    "red":        $red,
    "orange":     $orange,
    "carrot":     $carrot,

    "pink":         $pink,
    "purple":       $purple,
    "yellow":       $yellow,
    "teal":         $teal,
    "green":        $green,
    "blue":         $blue,
    "azure":        $azure,

    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,

    "black":      $black,
    "white":      $white,
    "gray":       $gray-500,
    "dark":       $gray-800,
    "light":      $light

It is way more than this, e.g. we are not using rounded corners, different spacing etc. After purchasing and embedding bootstrap pro I have noticed that those variables are overriden by MDB Pro and that it seems to have very different variables.

Is MDB Pro using an entirely different system of variables?

How can I migrate from MDB to MDB Pro with custom SASS compilation with the least pain?

Maybe there is a way to embed only the required pro components without switching the entire SASS code?

Marta Szymanska staff pro premium answered 3 years ago


we overwrite some of the Bootstrap variables and we use, for example, different colors than Bootstrap does. What exactly do you mean by saying "different system of variables"?

In the MDB jQuery package there is no other way to migrate code than just copy from the old file and paste into the new file. And we don't have an object like $theme-colors in our variables files, only Bootstrap has, so MDB doesn't overwrite variables from this object but if you would like to overwrite settings in our components, you have to overwrite in your custom file our objects and variables, then you will change our colors to your color in our components.

You can comment in mdb.scss file unnecessary imported files, for example, this line: @import "pro/buttons";.

Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: Notebok
  • Browser: Chrome
  • OS: Linux Mint
  • Provided sample code: No
  • Provided link: No