Bootstrap 5 & MD 2.0 Colors


Topic: Bootstrap 5 & MD 2.0 Colors

MarcCaruso asked 4 years ago

Hi,

I am trying Bootstrap 5 & Material Design 2.0 (I have purchased an advanced subscription).

I would like to use the colors from the full pallet available in https://mdbootstrap.com/docs/standard/content-styles/colors/, but I didn't really catch what I have to do...

Your documentation send us to the following file: scss/free/_variables.scss.But what is the deal with this file? is it already loaded? Did I have to copy it somewhere else? What I have to do with?

For example, if I want to use the "purple 300" (#BA68C8) color for both text and background usage, what I have to do?

Thanks in advance for clarifying this point.

Kind Regards.

Marc


Hi,

when you have installed Webpack with MDB 5, it will be very easy to use these colors from a full palette. Here you have our "Webpack starter" with the configured compilation of the SCSS files if you have a problem with compilation.

Steps:

1) in your project, run the npm start command

2) go to the scss/mdb.free.scss file and on the bottom of the page paste this code:

@import "./custom/styles";

3) go to the scss/custom/_styles.scss file and paste code like this:

body { background-color: $purple-300; color: $purple-300;}

4) compile your new styles to the mdb.css file by running this command: npm run build.

In this way, you can use all our colors variables.

Is this solve your problem? If not, please don't hesitate to write to me and I will try to help you more.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mac OS Catalina 10.15.7
  • Provided sample code: No
  • Provided link: Yes
Tags