0

For a project I have to use certain custom color definitions from some ready-made design. It is my first project with Bootstrap (https://mdbootstrap.com/docs/jquery/).

In order to stick to the design guidelines I am compiling the Bootstrap SASS file myself by including it from the node_modules folder like this:

// override BMD variables here@import "reset";
@import "variables_bootstrap";
@import "variables_mdb";

// import BMD
@import "../../../../node_modules/bootstrap-material-design/scss/core";

Within variables_bootstrap.scss I have all the bootstrap variables and alter them to my needs (breakpoints, theme colors etc.).

When it comes to buttons I have a bunch of options:

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;
$btn-line-height-sm:          $input-btn-line-height-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;
$btn-line-height-lg:          $input-btn-line-height-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-disabled-color:     $gray-600;

$btn-block-spacing-y:         .5rem;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-lg:        $border-radius-lg;
$btn-border-radius-sm:        $border-radius-sm;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

But it seems like there is not any settings regarding colors. My HTML is like:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

This is how the buttons look like:

MDB Buttons

Well the colors are like I have defined them, but I want the color to be the background color [its transparent] and and the actual color to be white. Maybe I just miss something obvious - do you know how to solve this?

Note: Hardcoded overrides with !important for each and every generated button is not the solution which I am looking for.

Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • I think this has already been answered here: https://stackoverflow.com/questions/49184471/how-to-change-bootstrap-version-4-button-color/51652388#51652388 – Carol Skelly Oct 02 '19 at 19:21
  • @Senpai.D No and it works. Thats awesome thank you very much :-D Still I wonder why in the docs they do not use this classes? https://mdbootstrap.com/docs/jquery/components/buttons/ – Blackbam Oct 02 '19 at 19:25

1 Answers1

0

Well for me it works as soon as I add some additional bootstrap classes:

<button type="button" class="btn btn-pink bg-pink text-white">Pink</button>
<button type="button" class="btn btn-purple bg-purple text-white">Purple</button>

An answer why this is different from the docs is still welcome.

Blackbam
  • 17,496
  • 26
  • 97
  • 150