btn-light and btn-warning text color is white by default

[jakec-dev]

When using .btn-light or .btn-warning button classes, the bootstrap mixin that creates a dark contrasting text color for the button is overwritten by MD Bootstrap's .btn class which simply specifies that the text color is to be white. So if you use .btn-light, it creates a button that has both a white background and white text.

Mixin from Bootstrap that creates the contrasting color: bootstrap/scss/mixins/_buttons.scss (line 7)

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

Chrome Inspector showing that it's being overwritten:

Where it's being overwritten:

Workaround: Create .btn-light class in css/styles.css and set text color manually - must use !important.

.btn-light, .btn-warning {
    color: #111 !important;
}

[JStrebeyko]

Thanks for reaching out! We're on it.